feat: Add richer card theme support (#1809)

src/components/icon.ts

@@ -1,7 +1,13 @@
 import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
-import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import {
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+  unsafeCSS,
+} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import { IconController } from '../components-lib/icon-controller';
 import iconStyle from '../scss/icon.scss';
 import { Icon } from '../types';
@@ -14,17 +20,35 @@ export class FrigateCardIcon extends LitElement {
   @property({ attribute: false })
   public icon?: Icon;
 
+  // Note: This attribute will allow non-active entity state styles (e.g. 'off',
+  // 'unavailable') to be overriden from outside the icon itself. This is useful
+  // in the menu / submenus where we want icons to follow menu theming, unless
+  // they are 'active'. This attribute is not used in code, but matched in
+  // icon.scss .
+  @property({ attribute: 'allow-override-non-active-styles', type: Boolean })
+  public allowOverrideNonActiveStyles = false;
+
   private _controller = new IconController();
+  private _svg: HTMLElement | null = null;
+
+  protected willUpdate(changedProps: PropertyValues): void {
+    if (changedProps.has('icon')) {
+      const customIcon = this._controller.getCustomIcon(this.icon);
+      if (customIcon) {
+        const svgElement = document.createElement('svg');
+        svgElement.innerHTML = customIcon;
+        this._svg = svgElement;
+      } else {
+        this._svg = null;
+      }
+    }
+  }
 
   protected render(): TemplateResult {
-    const customIconURL = this._controller.getCustomIcon(this.icon);
-    const style = styleMap(this.icon?.style || {});
-
-    if (customIconURL) {
-      return html`<img style="${style}" src="${customIconURL}" />`;
-    }
-    if (this.icon?.icon) {
-      return html`<ha-icon style="${style}" icon="${this.icon.icon}"></ha-icon>`;
+    if (this._svg) {
+      // Use SVG objects (rather than <img>) to ensure styling applies
+      // correctly.
+      return html`${this._svg}`;
     }
     if (this.hass && this.icon?.entity) {
       const stateObj = this._controller.createStateObjectForStateBadge(
@@ -35,16 +59,19 @@ export class FrigateCardIcon extends LitElement {
         // As a special case, need to pass in a color in order for the state
         // color to be overridden.
         return html`<state-badge
-          style="${style}"
-          .color="${this.icon.style?.color ?? undefined}"
+          .color="${this.style.color ?? undefined}"
           .stateColor=${this.icon.stateColor ?? true}
           .hass=${this.hass}
           .stateObj=${stateObj}
+          .overrideIcon=${this.icon.icon}
         ></state-badge>`;
       }
     }
+    if (this.icon?.icon) {
+      return html`<ha-icon icon="${this.icon.icon}"></ha-icon>`;
+    }
     if (this.icon?.fallback) {
-      return html`<ha-icon style="${style}" icon="${this.icon.fallback}"></ha-icon>`;
+      return html`<ha-icon icon="${this.icon.fallback}"></ha-icon>`;
     }
     return html``;
   }