Refactored EntityIcon component

platypush/backend/http/webapp/src/components/panels/Entities/Battery.vue

@@ -3,6 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
+          :entity="value"
           :icon="icon"
           :loading="loading"
           :error="error" />

platypush/backend/http/webapp/src/components/panels/Entities/BinarySensor.vue

@@ -3,7 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>

platypush/backend/http/webapp/src/components/panels/Entities/Device.vue

@@ -3,7 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>

platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue

@@ -3,7 +3,7 @@
     <div class="head" :class="{collapsed: collapsed}">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="this.value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>

platypush/backend/http/webapp/src/components/panels/Entities/EntityIcon.vue

@@ -4,7 +4,7 @@
       :style="colorFillStyle">
     <img src="@/assets/img/spinner.gif" class="loading" v-if="loading">
     <i class="fas fa-circle-exclamation error" v-else-if="error" />
-    <Icon v-bind="computedIcon" v-else />
+    <Icon v-bind="computedIconNormalized" v-else />
   </div>
 </template>
 
@@ -25,11 +25,16 @@ export default {
       default: false,
     },
 
-    icon: {
+    entity: {
       type: Object,
       required: true,
     },
 
+    icon: {
+      type: Object,
+      default: () => {},
+    },
+
     hasColorFill: {
       type: Boolean,
       default: false,
@@ -44,16 +49,23 @@ export default {
   },
 
   computed: {
+    computedIcon() {
+      let icon = {...(this.entity?.meta?.icon || {})}
+      if (Object.keys(this.icon || {}).length)
+        icon = this.icon
+      return {...icon}
+    },
+
     colorFill() {
-      return (this.hasColorFill && this.icon.color) ? this.icon.color : null
+      return this.hasColorFill && this.computedIcon.color
     },
 
     colorFillStyle() {
       return this.colorFill && !this.error ? {'background': this.colorFill} : {}
     },
 
-    computedIcon() {
+    computedIconNormalized() {
-      const icon = {...this.icon}
+      const icon = {...this.computedIcon}
       if (this.colorFill)
         delete icon.color
       return icon

platypush/backend/http/webapp/src/components/panels/Entities/EnumSensor.vue

@@ -3,7 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>

platypush/backend/http/webapp/src/components/panels/Entities/EnumSwitch.vue

@@ -3,7 +3,7 @@
     <div class="head" :class="{collapsed: collapsed}">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="this.value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>

platypush/backend/http/webapp/src/components/panels/Entities/Light.vue

@@ -2,8 +2,12 @@
   <div class="entity light-container">
     <div class="head" :class="{collapsed: collapsed}">
       <div class="col-1 icon">
-        <EntityIcon :icon="icon" :hasColorFill="true"
+        <EntityIcon
-          :loading="loading" :error="error" />
+          :entity="value"
+          :icon="icon"
+          :hasColorFill="true"
+          :loading="loading"
+          :error="error" />
       </div>
 
       <div class="col-s-8 col-m-9 label">

platypush/backend/http/webapp/src/components/panels/Entities/LinkQuality.vue

@@ -3,7 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>

platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue

@@ -3,7 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>

platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue

@@ -2,8 +2,10 @@
   <div class="entity switch-container">
     <div class="head">
       <div class="col-1 icon">
-        <EntityIcon :icon="value.meta?.icon || {}"
+        <EntityIcon
-          :loading="loading" :error="error" />
+          :entity="value"
+          :loading="loading"
+          :error="error" />
       </div>
 
       <div class="col-9 label">