Custom icons for row cards and glance (#1492)

* Custom icons for row cards

* Remove var fallback

* Add icon support to glance

* Fix glance

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

@@ -57,7 +57,7 @@ const CONFIGS = [
     `
   },
   {
-    heading: 'Custom name, secondary info',
+    heading: 'Custom name, secondary info, custom icon',
     config: `
 - type: entities
   entities:
@@ -67,7 +67,8 @@ const CONFIGS = [
       secondary_info: entity-id
     - entity: cover.kitchen_window
       secondary_info: last-changed
-    - group.kitchen
+    - entity: group.kitchen
+      icon: mdi:home-assistant
     - lock.kitchen_door
     - light.bed_light
   title: Random group

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

@@ -95,12 +95,13 @@ const CONFIGS = [
     `
   },
   {
-    heading: 'Custom name',
+    heading: 'Custom name, custom icon',
     config: `
 - type: glance
   entities:
     - entity: device_tracker.demo_paulus
       name: ¯\\_(ツ)_/¯
+      icon: mdi:home-assistant
     - media_player.living_room
     - sun.sun
     - cover.kitchen_window

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

@@ -10,6 +10,7 @@ import turnOnOffEntity from '../common/entity/turn-on-off-entity.js';
 
 import '../../../components/entity/state-badge.js';
 import '../../../components/ha-card.js';
+import '../../../components/ha-icon.js';
 
 import EventsMixin from '../../../mixins/events-mixin.js';
 import LocalizeMixin from '../../../mixins/localize-mixin.js';
@@ -28,6 +29,10 @@ 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;
@@ -60,7 +65,12 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
                 <template is="dom-if" if="[[_showInfo(_config.show_name)]]">
                   <div>[[_computeName(item, hass.states)]]</div>
                 </template>
-                <state-badge state-obj="[[_computeStateObj(item, hass.states)]]"></state-badge>
+                <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>
                 <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

@@ -3,6 +3,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../components/entity/state-badge.js';
 import '../../../components/ha-relative-time.js';
+import '../../../components/ha-icon.js';
 
 import computeStateName from '../../../common/entity/compute_state_name.js';
 
@@ -36,6 +37,10 @@ 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;
@@ -43,7 +48,12 @@ class HuiGenericEntityRow extends PolymerElement {
         }
       </style>
       <template is="dom-if" if="[[_stateObj]]">
-        <state-badge state-obj="[[_stateObj]]"></state-badge>
+        <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>
         <div class="flex">
           <div class="info">
             [[_computeName(config.name, _stateObj)]]