ha-state-icon.html

<link rel="import" href="../../../bower_components/polymer/polymer.html">

<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">

<dom-module id="ha-state-icon">
  <template>
    <iron-icon icon="[[computeIcon(stateObj)]]"></iron-icon>
  </template>
</dom-module>

<script>
Polymer({
  is: 'ha-state-icon',

  properties: {
    stateObj: {
      type: Object,
      observer: 'computeRotation',
    },
  },

  computeIcon: function (stateObj) {
    return window.hassUtil.stateIcon(stateObj);
  },

  computeRotation: function (stateObj) {
    var units = stateObj.attributes.unit_of_measurement;
    if (units === '°') {
      var deg = Number(stateObj.state) % 360;
      this.children[0].style.transform = 'rotate(' + deg + 'deg)';
    }
    console.dir(stateObj);
  }
});
</script>