Add icon effects to ha-icon

src/components/ha-icon.ts

@@ -4,6 +4,7 @@ import "@polymer/iron-icon/iron-icon";
 // Not duplicate, this is for typing.
 // tslint:disable-next-line
 import { IronIconElement } from "@polymer/iron-icon/iron-icon";
+import { html } from "@polymer/polymer/lib/utils/html-tag.js";
 
 const ironIconClass = customElements.get("iron-icon") as Constructor<
   IronIconElement
@@ -26,6 +27,96 @@ export class HaIcon extends ironIconClass {
       import(/* webpackChunkName: "mdi-icons" */ "../resources/mdi-icons");
     }
   }
+
+  _iconChanged(icon) {
+    const parts = (icon || "").split(":");
+    if (parts.length === 3) {
+      this._iconEffect = parts.pop();
+    }
+    this._iconName = parts.pop();
+    this._iconsetName = parts.pop() || this._DEFAULT_ICONSET;
+    this.setAttribute("effect", this._iconEffect);
+    this._updateIcon();
+  }
+
+  _template = html`
+    ${super._template}
+    <style>
+      :host([effect="rotate-45"]) {
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+      }
+      :host([effect="rotate-90"]) {
+        -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+        transform: rotate(90deg);
+      }
+      :host([effect="rotate-135"]) {
+        -webkit-transform: rotate(135deg);
+        -ms-transform: rotate(135deg);
+        transform: rotate(135deg);
+      }
+      :host([effect="rotate-180"]) {
+        -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        transform: rotate(180deg);
+      }
+      :host([effect="rotate-225"]) {
+        -webkit-transform: rotate(225deg);
+        -ms-transform: rotate(225deg);
+        transform: rotate(225deg);
+      }
+      :host([effect="rotate-270"]) {
+        -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+        transform: rotate(270deg);
+      }
+      :host([effect="rotate-315"]) {
+        -webkit-transform: rotate(315deg);
+        -ms-transform: rotate(315deg);
+        transform: rotate(315deg);
+      }
+
+      :host([effect="flip-h"]) {
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+        filter: FlipH;
+        -ms-filter: "FlipH";
+      }
+      :host([effect="flip-v"]) {
+        -webkit-transform: scaleY(-1);
+        transform: scaleY(-1);
+        filter: FlipV;
+        -ms-filter: "FlipV";
+      }
+
+      @-webkit-keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(359deg);
+          transform: rotate(359deg);
+        }
+      }
+      @keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(359deg);
+          transform: rotate(359deg);
+        }
+      }
+      :host([effect="spin"]) {
+        -webkit-animation: spin 2s infinite linear;
+        animation: spin 2s infinite linear;
+      }
+    </style>
+  `;
 }
 
 declare global {