Add multi-path icon support and path attributes (#18189)

src/components/ha-icon.ts

@@ -1,9 +1,9 @@
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -11,12 +11,12 @@ import { fireEvent } from "../common/dom/fire_event";
 import { debounce } from "../common/util/debounce";
 import { CustomIcon, customIcons } from "../data/custom_icons";
 import {
-  checkCacheVersion,
   Chunks,
-  findIconChunk,
-  getIcon,
   Icons,
   MDI_PREFIXES,
+  checkCacheVersion,
+  findIconChunk,
+  getIcon,
   writeCache,
 } from "../data/iconsets";
 import "./ha-svg-icon";
@@ -47,6 +47,8 @@ export class HaIcon extends LitElement {
 
   @state() private _path?: string;
 
+  @state() private _secondaryPath?: string;
+
   @state() private _viewBox?: string;
 
   @state() private _legacy = false;
@@ -55,6 +57,7 @@ export class HaIcon extends LitElement {
     super.willUpdate(changedProps);
     if (changedProps.has("icon")) {
       this._path = undefined;
+      this._secondaryPath = undefined;
       this._viewBox = undefined;
       this._loadIcon();
     }
@@ -70,6 +73,7 @@ export class HaIcon extends LitElement {
     }
     return html`<ha-svg-icon
       .path=${this._path}
+      .secondaryPath=${this._secondaryPath}
       .viewBox=${this._viewBox}
     ></ha-svg-icon>`;
   }
@@ -175,6 +179,7 @@ export class HaIcon extends LitElement {
       return;
     }
     this._path = icon.path;
+    this._secondaryPath = icon.secondaryPath;
     this._viewBox = icon.viewBox;
   }
 

src/components/ha-svg-icon.ts

@@ -1,10 +1,19 @@
-import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  LitElement,
+  nothing,
+  svg,
+  SVGTemplateResult,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-svg-icon")
 export class HaSvgIcon extends LitElement {
   @property() public path?: string;
 
+  @property() public secondaryPath?: string;
+
   @property() public viewBox?: string;
 
   protected render(): SVGTemplateResult {
@@ -13,11 +22,20 @@ export class HaSvgIcon extends LitElement {
       viewBox=${this.viewBox || "0 0 24 24"}
       preserveAspectRatio="xMidYMid meet"
       focusable="false"
-      role="img" 
+      role="img"
       aria-hidden="true"
     >
       <g>
-      ${this.path ? svg`<path d=${this.path}></path>` : ""}
+        ${
+          this.path
+            ? svg`<path class="primary-path" d=${this.path}></path>`
+            : nothing
+        }
+        ${
+          this.secondaryPath
+            ? svg`<path class="secondary-path" d=${this.secondaryPath}></path>`
+            : nothing
+        }
       </g>
     </svg>`;
   }
@@ -30,7 +48,7 @@ export class HaSvgIcon extends LitElement {
         justify-content: center;
         position: relative;
         vertical-align: middle;
-        fill: currentcolor;
+        fill: var(--icon-primary-color, currentcolor);
         width: var(--mdc-icon-size, 24px);
         height: var(--mdc-icon-size, 24px);
       }
@@ -40,6 +58,13 @@ export class HaSvgIcon extends LitElement {
         pointer-events: none;
         display: block;
       }
+      path.primary-path {
+        opacity: var(--icon-primary-opactity, 1);
+      }
+      path.secondary-path {
+        fill: var(--icon-secondary-color, currentcolor);
+        opacity: var(--icon-secondary-opactity, 0.5);
+      }
     `;
   }
 }

src/data/custom_icons.ts

@@ -2,6 +2,7 @@ import { customIconsets } from "./custom_iconsets";
 
 export interface CustomIcon {
   path: string;
+  secondaryPath?: string;
   viewBox?: string;
 }