Add a state badge with support for icon attribute

src/components/entity/ha-state-icon.html

@@ -0,0 +1,11 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
+
+<link rel="import" href="../../resources/home-assistant-icons.html">
+
+<dom-module id="ha-state-icon">
+  <template>
+    <iron-icon icon="[[computeIcon(stateObj)]]"></iron-icon>
+  </template>
+</dom-module>

src/components/entity/ha-state-icon.js

@@ -0,0 +1,17 @@
+import Polymer from '../../polymer';
+
+import stateIcon from '../../util/state-icon';
+
+export default new Polymer({
+  is: 'ha-state-icon',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  computeIcon(stateObj) {
+    return stateIcon(stateObj);
+  },
+});

src/components/entity/state-badge.html

@@ -1,7 +1,7 @@
 <link rel='import' href='../../../bower_components/polymer/polymer.html'>
 <link rel='import' href='../../../bower_components/iron-image/iron-image.html'>
 
-<link rel='import' href='../domain-icon.html'>
+<link rel='import' href='./ha-state-icon.html'>
 
 <dom-module id='state-badge'>
   <style>
@@ -23,25 +23,24 @@
     border-radius: 50%;
   }
 
-  domain-icon {
+  ha-state-icon {
     margin: 0 auto;
     transition: color .3s ease-in-out;
   }
 
   /* Color the icon if light or sun is on */
-  domain-icon[data-domain=light][data-state=on],
+  ha-state-icon[data-domain=light][data-state=on],
-  domain-icon[data-domain=switch][data-state=on],
+  ha-state-icon[data-domain=switch][data-state=on],
-  domain-icon[data-domain=sun][data-state=above_horizon] {
+  ha-state-icon[data-domain=sun][data-state=above_horizon] {
     color: #DCC91F;
   }
   </style>
 
   <template>
     <div class='layout horizontal center badge'>
-      <domain-icon id='icon'
+      <ha-state-icon id='icon' state-obj='[[stateObj]]'
-        domain='[[stateObj.domain]]' data-domain$='[[stateObj.domain]]'
+        data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
-        state='[[stateObj.state]]' data-state$='[[stateObj.state]]'>
+      </ha-state-icon>
-      </domain-icon>
       <template is='dom-if' if='[[stateObj.attributes.entity_picture]]'>
         <iron-image
           sizing='cover' class='fit'

src/components/entity/state-badge.js

@@ -2,7 +2,7 @@ import Polymer from '../../polymer';
 
 import xyBriToRgb from '../../util/xybri-to-rgb';
 
-require('../domain-icon');
+require('./ha-state-icon');
 
 export default new Polymer({
   is: 'state-badge',

src/util/default-icon.js

@@ -0,0 +1 @@
+export default 'bookmark';

src/util/domain-icon.js

@@ -1,3 +1,5 @@
+import defaultIcon from './default-icon';
+
 export default function domainIcon(domain, state) {
   switch (domain) {
   case 'homeassistant':
@@ -36,7 +38,7 @@ export default function domainIcon(domain, state) {
     return 'announcement';
 
   case 'thermostat':
-    return 'homeassistant-100:thermostat';
+    return 'settings-brightness';
 
   case 'sensor':
     return 'visibility';
@@ -58,6 +60,6 @@ export default function domainIcon(domain, state) {
       'icons:cloud-download' : 'icons:cloud-done';
 
   default:
-    return 'bookmark';
+    return defaultIcon;
   }
 }

src/util/state-icon.js

@@ -0,0 +1,25 @@
+import defaultIcon from './default-icon';
+import domainIcon from './domain-icon.js';
+import {
+  util,
+} from './home-assistant-js-instance';
+
+
+export default function stateIcon(state) {
+  if (!state) {
+    return defaultIcon;
+  } else if (state.attributes.icon) {
+    return state.attributes.icon;
+  }
+
+  const unit = state.attributes.unit_of_measurement;
+
+  if (unit && state.domain === 'sensor') {
+    if (unit === util.temperatureUnits.UNIT_TEMP_C ||
+        unit === util.temperatureUnits.UNIT_TEMP_F) {
+      return 'homeassistant-100:thermostat';
+    }
+  }
+
+  return domainIcon(state.domain, state.state);
+}