fix: Rationalize custom icons to avoid duplication (#1639)

src/components/menu.ts

@@ -8,6 +8,7 @@ import { MenuController } from '../components-lib/menu-controller.js';
 import type { MenuConfig, MenuItem } from '../config/types.js';
 import menuStyle from '../scss/menu.scss';
 import { frigateCardHasAction } from '../utils/action.js';
+import { getCustomIconURL } from '../utils/custom-icons.js';
 import { EntityRegistryManager } from '../utils/ha/registry/entity/index.js';
 import './submenu.js';
 
@@ -72,7 +73,7 @@ export class FrigateCardMenu extends LitElement {
     //   (`data-state`). This looks up a CSS style in `menu.scss`.
 
     const buttonState = this._controller.getFreshButtonState(this.hass, button);
-    const svgPath = this._controller.getSVGPath(button);
+    const customImageURL = getCustomIconURL(buttonState.icon);
 
     return html` <ha-icon-button
       data-domain=${ifDefined(buttonState.data_domain)}
@@ -86,8 +87,8 @@ export class FrigateCardMenu extends LitElement {
       .label=${buttonState.title || ''}
       @action=${(ev) => this._controller.actionHandler(ev, button)}
     >
-      ${svgPath
-        ? html`<ha-svg-icon .path="${svgPath}"></ha-svg-icon>`
+      ${customImageURL
+        ? html`<img src="${customImageURL}" />`
         : html`<ha-icon
             icon="${buttonState.icon || 'mdi:gesture-tap-button'}"
           ></ha-icon>`}

src/components/status-bar.ts

@@ -13,6 +13,7 @@ import { StatusBarController } from '../components-lib/status-bar-controller';
 import { StatusBarConfig, StatusBarItem } from '../config/types';
 import statusStyle from '../scss/status.scss';
 import { frigateCardHasAction } from '../utils/action';
+import { getCustomIconURL } from '../utils/custom-icons.js';
 
 @customElement('frigate-card-status-bar')
 export class FrigateCardStatusBar extends LitElement {
@@ -67,12 +68,20 @@ export class FrigateCardStatusBar extends LitElement {
               ${item.string}
             </div>`;
           } else if (item.type === 'custom:frigate-card-status-bar-icon') {
-            return html`<ha-icon
-              .actionHandler=${handler}
-              class="${classes}"
-              icon="${item.icon}"
-              @action=${(ev) => this._controller.actionHandler(ev, item.actions)}
-            ></ha-icon>`;
+            const customIconURL = getCustomIconURL(item.icon);
+            return customIconURL
+              ? html`<img
+                  .actionHandler=${handler}
+                  class="${classes}"
+                  src="${customIconURL}"
+                  @action=${(ev) => this._controller.actionHandler(ev, item.actions)}
+                />`
+              : html`<ha-icon
+                  .actionHandler=${handler}
+                  class="${classes}"
+                  icon="${item.icon}"
+                  @action=${(ev) => this._controller.actionHandler(ev, item.actions)}
+                ></ha-icon>`;
           } else if (item.type === 'custom:frigate-card-status-bar-image') {
             return html`<img
               .actionHandler=${handler}

src/components/submenu.ts

@@ -18,6 +18,7 @@ import {
   frigateCardHasAction,
   stopEventFromActivatingCardWideActions,
 } from '../utils/action.js';
+import { getCustomIconURL } from '../utils/custom-icons.js';
 import { isHassDifferent, refreshDynamicStateParameters } from '../utils/ha';
 import { getEntityStateTranslation } from '../utils/ha/entity-state-translation.js';
 import { EntityRegistryManager } from '../utils/ha/registry/entity/index.js';
@@ -40,14 +41,23 @@ export class FrigateCardSubmenu extends LitElement {
     } as StateParameters);
     const getIcon = (stateParameters: StateParameters): TemplateResult => {
       if (stateParameters.icon) {
-        return html` <ha-icon
-          style="${styleMap(stateParameters.style || {})}"
-          data-domain=${ifDefined(stateParameters.data_domain)}
-          data-state=${ifDefined(stateParameters.data_state)}
-          slot="graphic"
-          icon="${stateParameters.icon || ''}"
-        >
-        </ha-icon>`;
+        const url = getCustomIconURL(stateParameters.icon);
+        return url
+          ? html`<img
+              style="${styleMap(stateParameters.style || {})}"
+              data-domain=${ifDefined(stateParameters.data_domain)}
+              data-state=${ifDefined(stateParameters.data_state)}
+              slot="graphic"
+              src=${url}
+            />`
+          : html` <ha-icon
+              style="${styleMap(stateParameters.style || {})}"
+              data-domain=${ifDefined(stateParameters.data_domain)}
+              data-state=${ifDefined(stateParameters.data_state)}
+              slot="graphic"
+              icon="${stateParameters.icon || ''}"
+            >
+            </ha-icon>`;
       }
       return html``;
     };