Add background to ha-svg-icon

gallery/src/demos/demo-ha-svg-icon.ts

@@ -0,0 +1,68 @@
+import {
+  mdiRocketLaunch,
+  mdiHomeAssistant,
+  mdiDocker,
+  mdiExclamationThick,
+  mdiFlask,
+} from "@mdi/js";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-svg-icon";
+
+@customElement("demo-ha-svg-icon")
+export class DemoHaSvgIcon extends LitElement {
+  protected render(): TemplateResult {
+    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>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      ha-svg-icon {
+        margin: 4px;
+      }
+      ha-svg-icon[background] {
+        color: var(--card-background-color);
+      }
+      .icon {
+        display: flex;
+        align-items: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-svg-icon": DemoHaSvgIcon;
+  }
+}

src/components/ha-svg-icon.ts

@@ -1,5 +1,6 @@
 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 {
@@ -7,9 +8,15 @@ export class HaSvgIcon extends LitElement {
 
   @property() public viewBox?: string;
 
+  @property({ type: Boolean }) public background = false;
+
   protected render(): SVGTemplateResult {
     return svg`
     <svg
+      class="${this.background ? "background" : ""}"
+      style="background-color: ${
+        this.background ? getColorByIndex(this.path?.length || 0) : "undefined"
+      };"
       viewBox=${this.viewBox || "0 0 24 24"}
       preserveAspectRatio="xMidYMid meet"
       focusable="false">
@@ -28,12 +35,14 @@ export class HaSvgIcon extends LitElement {
         position: relative;
         vertical-align: middle;
         fill: currentcolor;
-        width: var(--mdc-icon-size, 24px);
+      }
-        height: var(--mdc-icon-size, 24px);
+      .background {
+        padding: 8px;
+        border-radius: 50%;
       }
       svg {
-        width: 100%;
+        width: var(--mdc-icon-size, 24px);
-        height: 100%;
+        height: var(--mdc-icon-size, 24px);
         pointer-events: none;
         display: block;
       }