Fix custom icon colors in entities and glance cards. (#1587)

* Fix custom icon colors in entities and glance cards.

* Use ha-icon directly in state-badge.

gallery/src/demos/demo-hui-entities-card.js

@@ -140,7 +140,9 @@ const CONFIGS = [
     - entity: group.kitchen
       icon: mdi:home-assistant
     - lock.kitchen_door
-    - light.bed_light
+    - entity: light.bed_light
+      icon: mdi:alarm-light
+      name: Bed Light Custom Icon
     - climate.ecobee
     - input_number.noise_allowance
   title: Random group

gallery/src/demos/demo-hui-glance-card.js

@@ -105,7 +105,8 @@ const CONFIGS = [
     - media_player.living_room
     - sun.sun
     - cover.kitchen_window
-    - light.kitchen_lights
+    - entity: light.kitchen_lights
+      icon: mdi:alarm-light
     - lock.kitchen_door
     - light.ceiling_lights
     `

src/components/entity/state-badge.js

@@ -1,8 +1,9 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import './ha-state-icon.js';
+import '../ha-icon.js';
 import computeStateDomain from '../../common/entity/compute_state_domain.js';
+import stateIcon from '../../common/entity/state_icon.js';
 
 class StateBadge extends PolymerElement {
   static get template() {
@@ -20,26 +21,31 @@ class StateBadge extends PolymerElement {
       line-height: 40px;
     }
 
-    ha-state-icon {
+    ha-icon {
       transition: color .3s ease-in-out, filter .3s ease-in-out;
     }
 
     /* Color the icon if light or sun is on */
-    ha-state-icon[data-domain=light][data-state=on],
-    ha-state-icon[data-domain=switch][data-state=on],
-    ha-state-icon[data-domain=binary_sensor][data-state=on],
-    ha-state-icon[data-domain=fan][data-state=on],
-    ha-state-icon[data-domain=sun][data-state=above_horizon] {
+    ha-icon[data-domain=light][data-state=on],
+    ha-icon[data-domain=switch][data-state=on],
+    ha-icon[data-domain=binary_sensor][data-state=on],
+    ha-icon[data-domain=fan][data-state=on],
+    ha-icon[data-domain=sun][data-state=above_horizon] {
       color: var(--paper-item-icon-active-color, #FDD835);
     }
 
     /* Color the icon if unavailable */
-    ha-state-icon[data-state=unavailable] {
+    ha-icon[data-state=unavailable] {
       color: var(--state-icon-unavailable-color);
     }
     </style>
 
-    <ha-state-icon id="icon" state-obj="[[stateObj]]" data-domain$="[[computeDomain(stateObj)]]" data-state$="[[stateObj.state]]"></ha-state-icon>
+    <ha-icon
+      id="icon"
+      data-domain$="[[_computeDomain(stateObj)]]"
+      data-state$="[[stateObj.state]]"
+      icon="[[_computeIcon(stateObj)]]"
+    ></ha-icon>
 `;
   }
 
@@ -47,19 +53,22 @@ class StateBadge extends PolymerElement {
     return {
       stateObj: {
         type: Object,
-        observer: 'updateIconAppearance',
+        observer: '_updateIconAppearance',
       },
+      overrideIcon: String
     };
   }
 
-  computeDomain(stateObj) {
+  _computeDomain(stateObj) {
     return computeStateDomain(stateObj);
   }
 
+  _computeIcon(stateObj) {
+    return this.overrideIcon || stateIcon(stateObj);
+  }
 
-  updateIconAppearance(newVal) {
+  _updateIconAppearance(newVal) {
     const iconStyle = {
-      display: 'inline',
       color: '',
       filter: '',
     };

src/panels/lovelace/cards/hui-glance-card.js

@@ -28,10 +28,6 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         ha-card[header] {
           padding-top: 0;
         }
-        ha-icon {
-          padding: 8px;
-          color: var(--paper-item-icon-color);
-        }
         .entities {
           display: flex;
           margin-bottom: -12px;
@@ -67,12 +63,10 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
                 <template is="dom-if" if="[[_showInfo(_config.show_name)]]">
                   <div class="name">[[_computeName(item, hass.states)]]</div>
                 </template>
-                <template is="dom-if" if="[[!item.icon]]">
-                  <state-badge state-obj="[[_computeStateObj(item, hass.states)]]"></state-badge>
-                </template>
-                <template is="dom-if" if="[[item.icon]]">
-                  <ha-icon icon="[[item.icon]]"></ha-icon>
-                </template>
+                <state-badge
+                  state-obj="[[_computeStateObj(item, hass.states)]]"
+                  override-icon="[[item.icon]]"
+                ></state-badge>
                 <template is="dom-if" if="[[_showInfo(_config.show_state)]]">
                   <div>[[_computeState(item, hass.states)]]</div>
                 </template>

src/panels/lovelace/components/hui-generic-entity-row.js

@@ -41,10 +41,6 @@ class HuiGenericEntityRow extends PolymerElement {
           display: block;
           color: var(--secondary-text-color);
         }
-        ha-icon {
-          padding: 8px;
-          color: var(--paper-item-icon-color);
-        }
         .not-found {
           flex: 1;
           background-color: yellow;
@@ -55,12 +51,10 @@ class HuiGenericEntityRow extends PolymerElement {
         }
       </style>
       <template is="dom-if" if="[[_stateObj]]">
-        <template is="dom-if" if="[[!config.icon]]">
-          <state-badge state-obj="[[_stateObj]]"></state-badge>
-        </template>
-        <template is="dom-if" if="[[config.icon]]">
-          <ha-icon icon="[[config.icon]]"></ha-icon>
-        </template>
+        <state-badge
+          state-obj="[[_stateObj]]"
+          override-icon="[[config.icon]]"
+        ></state-badge>
         <div class="flex">
           <div class="info">
             [[_computeName(config.name, _stateObj)]]