From 97f548a9f1b25904bf93ec969e8a9489a14aff7d Mon Sep 17 00:00:00 2001
From: c727 <crusader727@gmx.de>
Date: Sat, 21 Jul 2018 09:04:45 +0200
Subject: [PATCH] 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          |  5 +++--
 gallery/src/demos/demo-hui-glance-card.js            |  3 ++-
 src/panels/lovelace/cards/hui-glance-card.js         | 12 +++++++++++-
 .../lovelace/components/hui-generic-entity-row.js    | 12 +++++++++++-
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js
index d4c9b3e3fb..bd4d73cdc1 100644
--- a/gallery/src/demos/demo-hui-entities-card.js
+++ b/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
diff --git a/gallery/src/demos/demo-hui-glance-card.js b/gallery/src/demos/demo-hui-glance-card.js
index c0f2f6c8e8..f180087baf 100644
--- a/gallery/src/demos/demo-hui-glance-card.js
+++ b/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
diff --git a/src/panels/lovelace/cards/hui-glance-card.js b/src/panels/lovelace/cards/hui-glance-card.js
index f20b13768d..8eee6c35c7 100644
--- a/src/panels/lovelace/cards/hui-glance-card.js
+++ b/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>
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.js b/src/panels/lovelace/components/hui-generic-entity-row.js
index b14a656e70..01fe7e53f1 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.js
+++ b/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)]]