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],
-  domain-icon[data-domain=switch][data-state=on],
-  domain-icon[data-domain=sun][data-state=above_horizon] {
+  ha-state-icon[data-domain=light][data-state=on],
+  ha-state-icon[data-domain=switch][data-state=on],
+  ha-state-icon[data-domain=sun][data-state=above_horizon] {
     color: #DCC91F;
   }
   </style>
 
   <template>
     <div class='layout horizontal center badge'>
-      <domain-icon id='icon'
-        domain='[[stateObj.domain]]' data-domain$='[[stateObj.domain]]'
-        state='[[stateObj.state]]' data-state$='[[stateObj.state]]'>
-      </domain-icon>
+      <ha-state-icon id='icon' state-obj='[[stateObj]]'
+        data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
+      </ha-state-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',