Add icons to live condition

src/components/automation/ha-automation-row-live-test.ts

@@ -1,5 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../ha-svg-icon";
+import { mdiCheck, mdiClose, mdiExclamation, mdiHelp } from "@mdi/js";
 
 export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
 
@@ -19,14 +21,24 @@ export class HaAutomationRowLiveTest extends LitElement {
 
   @property() public label = "";
 
+  private get _iconPath() {
+    switch (this.state) {
+      case "pass":
+        return mdiCheck;
+      case "fail":
+        return mdiClose;
+      case "invalid":
+        return mdiExclamation;
+      default:
+        return mdiHelp;
+    }
+  }
+
   protected render() {
     return html`
-      <div
-        id="indicator"
-        role="status"
-        tabindex="0"
-        aria-label=${this.label}
-      ></div>
+      <div id="indicator" role="status" tabindex="0" aria-label=${this.label}>
+        <ha-svg-icon .path=${this._iconPath}></ha-svg-icon>
+      </div>
     `;
   }
 
@@ -38,26 +50,36 @@ export class HaAutomationRowLiveTest extends LitElement {
       display: inline-block;
     }
     #indicator {
-      width: 10px;
-      height: 10px;
+      width: 16px;
+      height: 16px;
+      display: grid;
+      place-items: center;
       border-radius: var(--ha-border-radius-circle);
       border: var(--ha-border-width-md) solid;
       box-sizing: border-box;
       background-color: var(--card-background-color);
-      box-shadow: 0 0 0 2px var(--card-background-color);
+      color: var(--ha-color-neutral-60);
       transition: all var(--ha-animation-duration-normal) ease-in-out;
     }
+    #indicator ha-svg-icon {
+      width: 12px;
+      height: 12px;
+      --mdc-icon-size: 12px;
+    }
     :host([state="pass"]) #indicator {
-      background-color: var(--ha-color-green-60);
+      color: var(--ha-color-green-60);
       border-color: var(--ha-color-green-60);
     }
     :host([state="fail"]) #indicator {
+      color: var(--ha-color-orange-60);
       border-color: var(--ha-color-orange-60);
     }
     :host([state="invalid"]) #indicator {
+      color: var(--ha-color-red-60);
       border-color: var(--ha-color-red-60);
     }
     :host([state="unknown"]) #indicator {
+      color: var(--ha-color-neutral-60);
       border-color: var(--ha-color-neutral-60);
     }
   `;