From ad4814dfade7b4ccedc0465e767a0a1043c57c1a Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 3 Jul 2018 14:33:43 -0400
Subject: [PATCH] Use ha-icon when user can set icon (#1399)

---
 src/cards/ha-plant-card.js               |  6 +++---
 src/cards/ha-weather-card.js             | 10 +++++-----
 src/components/ha-label-badge.js         |  4 ++--
 src/components/ha-labeled-slider.js      |  6 +++---
 src/layouts/partial-cards.js             |  6 +++---
 src/panels/lovelace/ha-panel-lovelace.js | 10 +---------
 src/panels/lovelace/hui-root.js          |  4 ++--
 src/panels/map/ha-panel-map.js           |  7 ++++---
 8 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/src/cards/ha-plant-card.js b/src/cards/ha-plant-card.js
index f58375ca43..265da143a5 100644
--- a/src/cards/ha-plant-card.js
+++ b/src/cards/ha-plant-card.js
@@ -1,8 +1,8 @@
-import '@polymer/iron-icon/iron-icon.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/ha-card.js';
+import '../components/ha-icon.js';
 
 import computeStateName from '../common/entity/compute_state_name.js';
 import EventsMixin from '../mixins/events-mixin.js';
@@ -44,7 +44,7 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
       .has-plant-image .content {
         padding-bottom: 16px;
       }
-      iron-icon {
+      ha-icon {
         color: var(--paper-item-icon-color);
         margin-bottom: 8px;
       }
@@ -70,7 +70,7 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
       <div class="content">
         <template is="dom-repeat" items="[[computeAttributes(stateObj.attributes)]]">
           <div class="attributes" on-click="attributeClicked">
-            <div><iron-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></iron-icon></div>
+            <div><ha-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></ha-icon></div>
             <div class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]">
               [[computeValue(stateObj.attributes, item)]]
             </div>
diff --git a/src/cards/ha-weather-card.js b/src/cards/ha-weather-card.js
index d37790fe1c..251467d607 100644
--- a/src/cards/ha-weather-card.js
+++ b/src/cards/ha-weather-card.js
@@ -1,8 +1,8 @@
-import '@polymer/iron-icon/iron-icon.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.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';
@@ -23,7 +23,7 @@ class HaWeatherCard extends
           padding: 0 20px 20px;
         }
 
-        iron-icon {
+        ha-icon {
           color: var(--paper-item-icon-color);
         }
 
@@ -40,7 +40,7 @@ class HaWeatherCard extends
           margin-right: 32px;
         }
 
-        .main iron-icon {
+        .main ha-icon {
           --iron-icon-height: 72px;
           --iron-icon-width: 72px;
           margin-right: 8px;
@@ -94,7 +94,7 @@ class HaWeatherCard extends
           <div class="now">
             <div class="main">
               <template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
-                <iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon>
+                <ha-icon icon="[[getWeatherIcon(stateObj.state)]]"></ha-icon>
               </template>
               <div class="temp">
                 [[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span>
@@ -135,7 +135,7 @@ class HaWeatherCard extends
                   </div>
                   <template is="dom-if" if="[[item.condition]]">
                     <div class="icon">
-                      <iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
+                      <ha-icon icon="[[getWeatherIcon(item.condition)]]"></ha-icon>
                     </div>
                   </template>
                   <div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>
diff --git a/src/components/ha-label-badge.js b/src/components/ha-label-badge.js
index c292f9dfce..f66818947d 100644
--- a/src/components/ha-label-badge.js
+++ b/src/components/ha-label-badge.js
@@ -1,6 +1,6 @@
-import '@polymer/iron-icon/iron-icon.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import './ha-icon.js';
 
 class HaLabelBadge extends PolymerElement {
   static get template() {
@@ -83,7 +83,7 @@ class HaLabelBadge extends PolymerElement {
     <div class="badge-container">
       <div class="label-badge" id="badge">
         <div class$="[[computeValueClasses(value)]]">
-          <iron-icon icon="[[icon]]" hidden$="[[computeHideIcon(icon, value, image)]]"></iron-icon>
+          <ha-icon icon="[[icon]]" hidden$="[[computeHideIcon(icon, value, image)]]"></ha-icon>
           <span hidden$="[[computeHideValue(value, image)]]">[[value]]</span>
         </div>
         <div hidden$="[[computeHideLabel(label)]]" class$="[[computeLabelClasses(label)]]">
diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js
index 3bb6300aae..956c4da167 100644
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@@ -1,8 +1,8 @@
-import '@polymer/iron-icon/iron-icon.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './ha-paper-slider.js';
+import './ha-icon.js';
 
 class HaLabeledSlider extends PolymerElement {
   static get template() {
@@ -18,7 +18,7 @@ class HaLabeledSlider extends PolymerElement {
         opacity: var(--dark-primary-opacity);
       }
 
-      iron-icon {
+      ha-icon {
         float: left;
         margin-top: 4px;
         opacity: var(--dark-secondary-opacity);
@@ -34,7 +34,7 @@ class HaLabeledSlider extends PolymerElement {
       <slot name="extra"></slot>
     </div>
     <div class="slider-container">
-      <iron-icon icon="[[icon]]" hidden$="[[!icon]]"></iron-icon>
+      <ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
       <ha-paper-slider
         min="[[min]]" max="[[max]]" step="[[step]]"
         pin="[[pin]]" disabled="[[disabled]]" disabled="[[disabled]]"
diff --git a/src/layouts/partial-cards.js b/src/layouts/partial-cards.js
index 9d5f1e9bc4..ab4f53375b 100644
--- a/src/layouts/partial-cards.js
+++ b/src/layouts/partial-cards.js
@@ -3,7 +3,6 @@ import '@polymer/app-layout/app-scroll-effects/effects/waterfall.js';
 import '@polymer/app-layout/app-toolbar/app-toolbar.js';
 import '@polymer/app-route/app-route.js';
 import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
-import '@polymer/iron-icon/iron-icon.js';
 import '@polymer/iron-pages/iron-pages.js';
 import '@polymer/paper-tabs/paper-tab.js';
 import '@polymer/paper-tabs/paper-tabs.js';
@@ -11,6 +10,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../components/ha-cards.js';
+import '../components/ha-icon.js';
 import '../components/ha-menu-button.js';
 import '../components/ha-start-voice-button.js';
 
@@ -69,7 +69,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
             </template>
             <template is="dom-if" if="[[defaultView]]">
               <template is="dom-if" if="[[defaultView.attributes.icon]]">
-                <iron-icon title$="[[_computeStateName(defaultView)]]" icon="[[defaultView.attributes.icon]]"></iron-icon>
+                <ha-icon title$="[[_computeStateName(defaultView)]]" icon="[[defaultView.attributes.icon]]"></ha-icon>
               </template>
               <template is="dom-if" if="[[!defaultView.attributes.icon]]">
                 [[_computeStateName(defaultView)]]
@@ -79,7 +79,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
           <template is="dom-repeat" items="[[views]]">
             <paper-tab data-entity$="[[item.entity_id]]" on-click="scrollToTop">
               <template is="dom-if" if="[[item.attributes.icon]]">
-                <iron-icon title$="[[_computeStateName(item)]]" icon="[[item.attributes.icon]]"></iron-icon>
+                <ha-icon title$="[[_computeStateName(item)]]" icon="[[item.attributes.icon]]"></ha-icon>
               </template>
               <template is="dom-if" if="[[!item.attributes.icon]]">
                 [[_computeStateName(item)]]
diff --git a/src/panels/lovelace/ha-panel-lovelace.js b/src/panels/lovelace/ha-panel-lovelace.js
index ebfccf26fb..2316c81c55 100644
--- a/src/panels/lovelace/ha-panel-lovelace.js
+++ b/src/panels/lovelace/ha-panel-lovelace.js
@@ -1,14 +1,6 @@
-import '@polymer/app-layout/app-header-layout/app-header-layout.js';
-import '@polymer/app-layout/app-header/app-header.js';
-import '@polymer/app-layout/app-toolbar/app-toolbar.js';
-import '@polymer/paper-button/paper-button.js';
-import '@polymer/paper-icon-button/paper-icon-button.js';
-import '@polymer/paper-tabs/paper-tab.js';
-import '@polymer/paper-tabs/paper-tabs.js';
-import '@polymer/iron-icon/iron-icon.js';
-
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import '@polymer/paper-button/paper-button.js';
 
 import '../../layouts/hass-loading-screen.js';
 import '../../layouts/hass-error-screen.js';
diff --git a/src/panels/lovelace/hui-root.js b/src/panels/lovelace/hui-root.js
index b4a2733488..946db854eb 100644
--- a/src/panels/lovelace/hui-root.js
+++ b/src/panels/lovelace/hui-root.js
@@ -5,7 +5,6 @@ import '@polymer/app-route/app-route.js';
 import '@polymer/paper-icon-button/paper-icon-button.js';
 import '@polymer/paper-tabs/paper-tab.js';
 import '@polymer/paper-tabs/paper-tabs.js';
-import '@polymer/iron-icon/iron-icon.js';
 
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -17,6 +16,7 @@ import NavigateMixin from '../../mixins/navigate-mixin.js';
 
 import '../../layouts/ha-app-layout.js';
 import '../../components/ha-start-voice-button.js';
+import '../../components/ha-icon.js';
 import { loadModule, loadJS } from '../../common/dom/load_resource.js';
 import './hui-view.js';
 
@@ -65,7 +65,7 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
             <template is="dom-repeat" items="[[config.views]]">
               <paper-tab>
                 <template is="dom-if" if="[[item.icon]]">
-                  <iron-icon title$="[[item.title]]" icon="[[item.icon]]"></iron-icon>
+                  <ha-icon title$="[[item.title]]" icon="[[item.icon]]"></ha-icon>
                 </template>
                 <template is="dom-if" if="[[!item.icon]]">
                   [[_computeTabTitle(item.title)]]
diff --git a/src/panels/map/ha-panel-map.js b/src/panels/map/ha-panel-map.js
index d8fcfecf36..448ef27ace 100644
--- a/src/panels/map/ha-panel-map.js
+++ b/src/panels/map/ha-panel-map.js
@@ -1,10 +1,10 @@
 import '@polymer/app-layout/app-toolbar/app-toolbar.js';
-import '@polymer/iron-icon/iron-icon.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import Leaflet from 'leaflet';
 
 import '../../components/ha-menu-button.js';
+import '../../components/ha-icon.js';
 
 import './ha-entity-marker.js';
 
@@ -126,8 +126,9 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
         // create icon
         var iconHTML = '';
         if (entity.attributes.icon) {
-          iconHTML = (
-            "<iron-icon icon='" + entity.attributes.icon + "'></iron-icon>");
+          const el = document.createElement('ha-icon');
+          el.setAttribute('icon', entity.attributes.icon);
+          iconHTML = el.outerHTML;
         } else {
           iconHTML = title;
         }