fix: Allow icon styles to be overridden (#1794)

src/components/icon.ts

@@ -1,6 +1,7 @@
 import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
 import { CSSResultGroup, html, LitElement, 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';
@@ -17,11 +18,13 @@ export class FrigateCardIcon extends LitElement {
 
   protected render(): TemplateResult {
     const customIconURL = this._controller.getCustomIcon(this.icon);
+    const style = styleMap(this.icon?.style || {});
+
     if (customIconURL) {
-      return html`<img src="${customIconURL}" />`;
+      return html`<img style="${style}" src="${customIconURL}" />`;
     }
     if (this.icon?.icon) {
-      return html`<ha-icon icon="${this.icon.icon}"></ha-icon>`;
+      return html`<ha-icon style="${style}" icon="${this.icon.icon}"></ha-icon>`;
     }
     if (this.hass && this.icon?.entity) {
       const stateObj = this._controller.createStateObjectForStateBadge(
@@ -29,7 +32,11 @@ export class FrigateCardIcon extends LitElement {
         this.icon.entity,
       );
       if (stateObj) {
+        // 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}"
           .stateColor=${this.icon.stateColor ?? true}
           .hass=${this.hass}
           .stateObj=${stateObj}
@@ -37,7 +44,7 @@ export class FrigateCardIcon extends LitElement {
       }
     }
     if (this.icon?.fallback) {
-      return html`<ha-icon icon="${this.icon.fallback}"></ha-icon>`;
+      return html`<ha-icon style="${style}" icon="${this.icon.fallback}"></ha-icon>`;
     }
     return html``;
   }

src/components/menu.ts

@@ -81,6 +81,7 @@ export class FrigateCardMenu extends LitElement {
           icon: button.icon,
           entity: button.entity,
           stateColor: button.state_color,
+          style: button.style,
           fallback: 'mdi:gesture-tap-button',
         }}
       ></frigate-card-icon>

src/components/submenu.ts

@@ -9,7 +9,7 @@ import {
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { actionHandler } from '../action-handler-directive.js';
 import { MenuSubmenu, MenuSubmenuItem, MenuSubmenuSelect } from '../config/types.js';
 import submenuStyle from '../scss/submenu.scss';
@@ -69,6 +69,7 @@ export class FrigateCardSubmenu extends LitElement {
           .icon=${{
             icon: item.icon,
             entity: item.entity,
+            style: item.style,
           }}
           style="${styleMap(item.style || {})}"
         ></frigate-card-icon>
@@ -81,6 +82,7 @@ export class FrigateCardSubmenu extends LitElement {
       return html``;
     }
     const items = this.submenu.items as MenuSubmenuItem[];
+    const style = styleMap(this.submenu.style || {});
     return html`
       <ha-button-menu
         corner=${'BOTTOM_LEFT'}
@@ -93,7 +95,7 @@ export class FrigateCardSubmenu extends LitElement {
         @click=${(ev) => stopEventFromActivatingCardWideActions(ev)}
       >
         <ha-icon-button
-          style="${styleMap((this.submenu.style as StyleInfo) || {})}"
+          style="${style}"
           class="button"
           slot="trigger"
           .label=${this.submenu.title || ''}
@@ -108,6 +110,7 @@ export class FrigateCardSubmenu extends LitElement {
           })}
         >
           <frigate-card-icon
+            style="${style}"
             .hass=${this.hass}
             .icon=${typeof this.submenu.icon === 'string'
               ? {
@@ -214,6 +217,7 @@ export class FrigateCardSubmenuSelect extends LitElement {
         icon: this.submenuSelect.icon,
         entity: entityID,
         fallback: 'mdi:format-list-bulleted',
+        style: this.submenuSelect.style,
       },
 
       type: 'custom:frigate-card-menu-submenu',

src/types.ts

@@ -5,6 +5,7 @@ import {
   LovelaceCardEditor,
   Themes,
 } from '@dermotduffy/custom-card-helpers';
+import { StyleInfo } from 'lit/directives/style-map';
 import { z } from 'zod';
 
 export type ClipsOrSnapshots = 'clips' | 'snapshots';
@@ -145,6 +146,9 @@ export interface Icon {
 
   // If an icon is not otherwise resolved / available, this will be used instead.
   fallback?: string;
+
+  // Styling to apply to the icon.
+  style?: StyleInfo;
 }
 
 // *************************************************************************