fix(QIcon): QBtn with QIcon with img doesn't render properly quasarframework#12016

Author: rstoenescu

ui/dev/src/pages/components/icon.vue

@@ -41,6 +41,10 @@
       <!-- Testing for 'M.' -->
       <q-icon :name="oiBatteryEmpty" size="5rem" color="secondary" />
 
+      <q-btn id="showInfoBtn" no-caps class="q-ml-sm">
+        <q-icon size="2em" name="img:https://www.gfbr.global/wp-content/uploads/2015/10/TwitterLogo_55acee-49x49.png" />
+      </q-btn>
+
       <q-space />
 
       <q-expansion-item
@@ -284,3 +288,14 @@ export default {
   }
 }
 </script>
+
+<style>
+#showInfoBtn {
+  position: absolute;
+  top: 4px;
+  right: 40px;
+  z-index: 3;
+  width: 36px;
+  height: 36px;
+}
+</style>

ui/src/components/icon/QIcon.js

@@ -173,15 +173,15 @@ export default Vue.extend({
     }
 
     if (this.type.img === true) {
-      return h('div', data, mergeSlot([
+      return h('span', data, mergeSlot([
         h('img', {
           attrs: { src: this.type.src }
         })
       ], this, 'default'))
     }
 
     if (this.type.svg === true) {
-      return h('div', data, mergeSlot([
+      return h('span', data, mergeSlot([
         h('svg', {
           attrs: {
             viewBox: this.type.viewBox,
@@ -192,7 +192,7 @@ export default Vue.extend({
     }
 
     if (this.type.svguse === true) {
-      return h('div', data, mergeSlot([
+      return h('span', data, mergeSlot([
         h('svg', {
           attrs: {
             viewBox: this.type.viewBox,

ui/src/components/icon/QIcon.sass

@@ -21,8 +21,8 @@
 
   > svg,
   > img
-    width: 100%
-    height: 100%
+    width: 1em
+    height: 1em
 
 .q-icon,
 .material-icons,

ui/src/components/icon/QIcon.styl

@@ -21,8 +21,8 @@
 
   > svg,
   > img
-    width: 100%
-    height: 100%
+    width: 1em
+    height: 1em
 
 .q-icon,
 .material-icons,