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``;
   }