From a8adf17f9de6ecedfcfef5695ab6298c22d1f369 Mon Sep 17 00:00:00 2001
From: Ludeeus <ludeeus@ludeeus.dev>
Date: Thu, 18 Nov 2021 21:04:16 +0000
Subject: [PATCH] adjust

---
 gallery/src/demos/demo-ha-svg-icon.ts | 47 +++++++++++----------------
 src/components/ha-svg-icon.ts         |  7 ++--
 2 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/gallery/src/demos/demo-ha-svg-icon.ts b/gallery/src/demos/demo-ha-svg-icon.ts
index da420aadaa..3970a386db 100644
--- a/gallery/src/demos/demo-ha-svg-icon.ts
+++ b/gallery/src/demos/demo-ha-svg-icon.ts
@@ -1,12 +1,7 @@
-import {
-  mdiRocketLaunch,
-  mdiHomeAssistant,
-  mdiDocker,
-  mdiExclamationThick,
-  mdiFlask,
-} from "@mdi/js";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
+import { getColorByIndex } from "../../../src/common/color/colors";
+import { FIXED_DOMAIN_ICONS } from "../../../src/common/const";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-svg-icon";
 
@@ -16,26 +11,22 @@ export class DemoHaSvgIcon extends LitElement {
     return html`
       <ha-card header="ha-svg-icon demo">
         <div class="card-content">
-          <div class="icon">
-            <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
-            <ha-svg-icon .path=${mdiHomeAssistant} background></ha-svg-icon>
-          </div>
-          <div class="icon">
-            <ha-svg-icon .path=${mdiRocketLaunch}></ha-svg-icon>
-            <ha-svg-icon .path=${mdiRocketLaunch} background></ha-svg-icon>
-          </div>
-          <div class="icon">
-            <ha-svg-icon .path=${mdiDocker}></ha-svg-icon>
-            <ha-svg-icon .path=${mdiDocker} background></ha-svg-icon>
-          </div>
-          <div class="icon">
-            <ha-svg-icon .path=${mdiExclamationThick}></ha-svg-icon>
-            <ha-svg-icon .path=${mdiExclamationThick} background></ha-svg-icon>
-          </div>
-          <div class="icon">
-            <ha-svg-icon .path=${mdiFlask}></ha-svg-icon>
-            <ha-svg-icon .path=${mdiFlask} background></ha-svg-icon>
-          </div>
+          ${Object.values(FIXED_DOMAIN_ICONS).map(
+            (icon) => html`
+              <div class="icon">
+                <ha-svg-icon .path=${icon}></ha-svg-icon>
+                <ha-svg-icon
+                  .path=${icon}
+                  .backgroundColor=${getColorByIndex(icon.length)}
+                ></ha-svg-icon>
+                <ha-svg-icon
+                  class="background"
+                  .path=${icon}
+                  .backgroundColor=${getColorByIndex(icon.length)}
+                ></ha-svg-icon>
+              </div>
+            `
+          )}
         </div>
       </ha-card>
     `;
@@ -50,7 +41,7 @@ export class DemoHaSvgIcon extends LitElement {
       ha-svg-icon {
         margin: 4px;
       }
-      ha-svg-icon[background] {
+      .background {
         color: var(--card-background-color);
       }
       .icon {
diff --git a/src/components/ha-svg-icon.ts b/src/components/ha-svg-icon.ts
index 3ee79971fd..7add74310e 100644
--- a/src/components/ha-svg-icon.ts
+++ b/src/components/ha-svg-icon.ts
@@ -1,6 +1,5 @@
 import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import { getColorByIndex } from "../common/color/colors";
 
 @customElement("ha-svg-icon")
 export class HaSvgIcon extends LitElement {
@@ -8,14 +7,14 @@ export class HaSvgIcon extends LitElement {
 
   @property() public viewBox?: string;
 
-  @property({ type: Boolean }) public background = false;
+  @property({ attribute: "background-color" }) public backgroundColor?: string;
 
   protected render(): SVGTemplateResult {
     return svg`
     <svg
-      class="${this.background ? "background" : ""}"
+      class="${this.backgroundColor ? "background" : ""}"
       style="background-color: ${
-        this.background ? getColorByIndex(this.path?.length || 0) : "undefined"
+        this.backgroundColor ? this.backgroundColor : "undefined"
       };"
       viewBox=${this.viewBox || "0 0 24 24"}
       preserveAspectRatio="xMidYMid meet"