fix: use same entity icons rules as home assistant frontend

src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts

@@ -10,13 +10,13 @@ import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
 import "../../shared/editor/layout-picker";
 import { configElementStyle } from "../../utils/editor-styles";
+import { stateIcon } from "../../utils/icons/state-icon";
 import { EditorTarget } from "../../utils/lovelace/editor/types";
 import {
     alarmControlPanelCardCardConfigStruct,
     AlarmControlPanelCardConfig,
 } from "./alarm-control-panel-card-config";
 import { ALARM_CONTROl_PANEL_CARD_EDITOR_NAME, ALARM_CONTROl_PANEL_ENTITY_DOMAINS } from "./const";
-import { getStateIcon } from "./utils";
 
 const DOMAINS = [...ALARM_CONTROl_PANEL_ENTITY_DOMAINS];
 
@@ -46,8 +46,8 @@ export class SwitchCardEditor extends LitElement implements LovelaceCardEditor {
         }
 
         const dir = computeRTLDirection(this.hass);
-        const entityState = this._config.entity ? this.hass.states[this._config.entity] : undefined;
-        const entityIcon = entityState ? getStateIcon(entityState.state) : undefined;
+        const entity = this._config.entity ? this.hass.states[this._config.entity] : undefined;
+        const entityIcon = entity ? stateIcon(entity) : undefined;
 
         const states = [
             "armed_home",

src/cards/alarm-control-panel-card/alarm-control-panel-card.ts

@@ -20,6 +20,8 @@ import "../../shared/state-item";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
+import { alarmPanelIconAction } from "../../utils/icons/alarm-panel-icon";
+import { stateIcon } from "../../utils/icons/state-icon";
 import { getLayoutFromConfig } from "../../utils/layout";
 import { AlarmControlPanelCardConfig } from "./alarm-control-panel-card-config";
 import "./alarm-control-panel-card-editor";
@@ -30,7 +32,6 @@ import {
 } from "./const";
 import {
     getStateColor,
-    getStateIcon,
     getStateService,
     isActionsAvailable,
     isDisarmed,
@@ -142,7 +143,7 @@ export class AlarmControlPanelCard extends LitElement implements LovelaceCard {
         const entity = this.hass.states[entity_id];
 
         const name = this._config.name ?? entity.attributes.friendly_name;
-        const icon = this._config.icon ?? getStateIcon(entity.state);
+        const icon = this._config.icon ?? stateIcon(entity);
         const color = getStateColor(entity.state);
         const shapePulse = shouldPulse(entity.state);
         const layout = getLayoutFromConfig(this._config);
@@ -209,7 +210,7 @@ export class AlarmControlPanelCard extends LitElement implements LovelaceCard {
                                   ${actions.map(
                                       (action) => html`
                                           <mushroom-button
-                                              .icon=${getStateIcon(action.state)}
+                                              .icon=${alarmPanelIconAction(action.state)}
                                               @click=${(e) => this._onTap(e, action.state)}
                                               .disabled=${!isActionEnabled}
                                           ></mushroom-button>

src/cards/alarm-control-panel-card/const.ts

@@ -4,20 +4,6 @@ export const ALARM_CONTROl_PANEL_CARD_NAME = `${PREFIX_NAME}-alarm-control-panel
 export const ALARM_CONTROl_PANEL_CARD_EDITOR_NAME = `${ALARM_CONTROl_PANEL_CARD_NAME}-editor`;
 export const ALARM_CONTROl_PANEL_ENTITY_DOMAINS = ["alarm_control_panel"];
 
-export const ALARM_CONTROL_PANEL_CARD_STATE_ICON = {
-    disarmed: "mdi:shield-off-outline",
-    arming: "mdi:shield-sync-outline",
-    armed_away: "mdi:shield-lock-outline",
-    armed_home: "mdi:shield-home-outline",
-    armed_night: "mdi:shield-moon-outline",
-    armed_vacation: "mdi:shield-airplane-outline",
-    armed_custom_bypass: "mdi:shield-half-full",
-    pending: "mdi:shield-sync",
-    triggered: "mdi:bell-ring-outline",
-    unavailable: "mdi:bell-remove-outline",
-};
-export const ALARM_CONTROL_PANEL_CARD_DEFAULT_STATE_ICON = "mdi:shield-lock-outline";
-
 export const ALARM_CONTROL_PANEL_CARD_STATE_COLOR = {
     disarmed: "var(--rgb-state-alarm-disarmed)",
     armed: "var(--rgb-state-alarm-armed)",
@@ -35,7 +21,3 @@ export const ALARM_CONTROL_PANEL_CARD_STATE_SERVICE = {
     armed_vacation: "alarm_arm_vacation",
     armed_custom_bypass: "alarm_arm_custom_bypass",
 };
-
-/*
-armed_away, armed_home, armed_night, arming, disarmed, pending, triggered and unavailable
-*/

src/cards/alarm-control-panel-card/utils.ts

@@ -1,9 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
     ALARM_CONTROL_PANEL_CARD_DEFAULT_STATE_COLOR,
-    ALARM_CONTROL_PANEL_CARD_DEFAULT_STATE_ICON,
     ALARM_CONTROL_PANEL_CARD_STATE_COLOR,
-    ALARM_CONTROL_PANEL_CARD_STATE_ICON,
     ALARM_CONTROL_PANEL_CARD_STATE_SERVICE,
 } from "./const";
 
@@ -14,18 +12,12 @@ export function getStateColor(state: string): string {
     );
 }
 
-export function getStateIcon(state: string): string {
-    return (
-        ALARM_CONTROL_PANEL_CARD_STATE_ICON[state] || ALARM_CONTROL_PANEL_CARD_DEFAULT_STATE_ICON
-    );
-}
-
 export function getStateService(state: string): string | undefined {
     return ALARM_CONTROL_PANEL_CARD_STATE_SERVICE[state];
 }
 
-export function shouldPulse(state:string): boolean {
-    return ["arming", "triggered", "pending", "unavailable"].indexOf(state) >= 0
+export function shouldPulse(state: string): boolean {
+    return ["arming", "triggered", "pending", "unavailable"].indexOf(state) >= 0;
 }
 
 export function isActionsAvailable(entity: HassEntity) {

src/cards/chips-card/chips/alarm-control-panel-chip-editor.ts

@@ -1,10 +1,11 @@
-import { fireEvent, HomeAssistant, stateIcon } from "custom-card-helpers";
+import { fireEvent, HomeAssistant } from "custom-card-helpers";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import setupCustomlocalize from "../../../localize";
 import "../../../shared/editor/color-picker";
 import "../../../shared/editor/info-picker";
 import { configElementStyle } from "../../../utils/editor-styles";
+import { stateIcon } from "../../../utils/icons/state-icon";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
 import { AlarmControlPanelChipConfig } from "../../../utils/lovelace/chip/types";
 import { EditorTarget } from "../../../utils/lovelace/editor/types";
@@ -66,6 +67,17 @@ export class AlarmControlPanelChipEditor extends LitElement implements LovelaceC
                     >
                     </mushroom-info-picker>
                 </div>
+                <div class="side-by-side">
+                    <ha-icon-picker
+                        .label="${this.hass.localize(
+                            "ui.panel.lovelace.editor.card.generic.icon"
+                        )} (${this.hass.localize("ui.panel.lovelace.editor.card.config.optional")})"
+                        .value=${this._config.icon}
+                        .placeholder=${this._config.icon || entityIcon}
+                        .configValue=${"icon"}
+                        @value-changed=${this._valueChanged}
+                    ></ha-icon-picker>
+                </div>
                 <div class="side-by-side">
                     <hui-action-editor
                         .label="${this.hass.localize(

src/cards/chips-card/chips/alarm-control-panel-chip.ts

@@ -12,15 +12,20 @@ import { styleMap } from "lit/directives/style-map.js";
 import { computeRgbColor } from "../../../utils/colors";
 import { actionHandler } from "../../../utils/directives/action-handler-directive";
 import { animation } from "../../../utils/entity-styles";
+import { stateIcon } from "../../../utils/icons/state-icon";
 import { getInfo } from "../../../utils/info";
 import {
     computeChipComponentName,
     computeChipEditorComponentName,
 } from "../../../utils/lovelace/chip/chip-element";
-import { AlarmControlPanelChipConfig, EntityChipConfig, LovelaceChip } from "../../../utils/lovelace/chip/types";
+import {
+    AlarmControlPanelChipConfig,
+    EntityChipConfig,
+    LovelaceChip,
+} from "../../../utils/lovelace/chip/types";
 import { LovelaceChipEditor } from "../../../utils/lovelace/types";
 import { ALARM_CONTROl_PANEL_ENTITY_DOMAINS } from "../../alarm-control-panel-card/const";
-import { getStateColor, getStateIcon, shouldPulse } from "../../alarm-control-panel-card/utils";
+import { getStateColor, shouldPulse } from "../../alarm-control-panel-card/utils";
 import "./alarm-control-panel-chip-editor";
 
 @customElement(computeChipComponentName("alarm-control-panel"))
@@ -63,7 +68,7 @@ export class AlarmControlPanelChip extends LitElement implements LovelaceChip {
         const entity = this.hass.states[entity_id];
 
         const name = this._config.name ?? entity.attributes.friendly_name ?? "";
-        const icon = this._config.icon ?? getStateIcon(entity.state);
+        const icon = this._config.icon ?? stateIcon(entity);
         const iconColor = getStateColor(entity.state);
         const iconPulse = shouldPulse(entity.state);
 

src/cards/chips-card/chips/entity-chip-editor.ts

@@ -1,10 +1,11 @@
-import { fireEvent, HomeAssistant, stateIcon } from "custom-card-helpers";
+import { fireEvent, HomeAssistant } from "custom-card-helpers";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import setupCustomlocalize from "../../../localize";
 import "../../../shared/editor/color-picker";
 import "../../../shared/editor/info-picker";
 import { configElementStyle } from "../../../utils/editor-styles";
+import { stateIcon } from "../../../utils/icons/state-icon";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
 import { EntityChipConfig } from "../../../utils/lovelace/chip/types";
 import { EditorTarget } from "../../../utils/lovelace/editor/types";

src/cards/chips-card/chips/entity-chip.ts

@@ -4,7 +4,6 @@ import {
     handleAction,
     hasAction,
     HomeAssistant,
-    stateIcon,
 } from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -13,6 +12,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import { computeRgbColor } from "../../../utils/colors";
 import { actionHandler } from "../../../utils/directives/action-handler-directive";
 import { isActive } from "../../../utils/entity";
+import { stateIcon } from "../../../utils/icons/state-icon";
 import { getInfo } from "../../../utils/info";
 import {
     computeChipComponentName,

src/cards/chips-card/chips/light-chip-editor.ts

@@ -1,9 +1,10 @@
-import { computeRTLDirection, fireEvent, HomeAssistant, stateIcon } from "custom-card-helpers";
+import { computeRTLDirection, fireEvent, HomeAssistant } from "custom-card-helpers";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import setupCustomlocalize from "../../../localize";
 import "../../../shared/editor/info-picker";
 import { configElementStyle } from "../../../utils/editor-styles";
+import { stateIcon } from "../../../utils/icons/state-icon";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
 import { LightChipConfig } from "../../../utils/lovelace/chip/types";
 import { EditorTarget } from "../../../utils/lovelace/editor/types";

src/cards/chips-card/chips/light-chip.ts

@@ -4,14 +4,14 @@ import {
     handleAction,
     hasAction,
     HomeAssistant,
-    stateIcon,
 } from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { actionHandler } from "../../../utils/directives/action-handler-directive";
 import { isActive } from "../../../utils/entity";
+import { stateIcon } from "../../../utils/icons/state-icon";
 import { getInfo } from "../../../utils/info";
 import {
     computeChipComponentName,

src/cards/cover-card/controls/cover-buttons-control.ts

@@ -4,6 +4,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import "../../../shared/button";
+import { computeCloseIcon, computeOpenIcon } from "../../../utils/icons/cover-icon";
 import { isClosing, isFullyClosed, isFullyOpen, isOpening } from "../utils";
 
 @customElement("mushroom-cover-buttons-control")
@@ -44,13 +45,13 @@ export class CoverButtonsControl extends LitElement {
                 })}
             >
                 <mushroom-button
-                    icon="mdi:arrow-down"
+                    .icon=${computeCloseIcon(this.entity)}
                     .disabled=${isFullyClosed(this.entity) || isClosing(this.entity)}
                     @click=${this._onCloseTap}
                 ></mushroom-button>
                 <mushroom-button icon="mdi:pause" @click=${this._onStopTap}></mushroom-button>
                 <mushroom-button
-                    icon="mdi:arrow-up"
+                    .icon=${computeOpenIcon(this.entity)}
                     .disabled=${isFullyOpen(this.entity) || isOpening(this.entity)}
                     @click=${this._onOpenTap}
                 ></mushroom-button>

src/cards/cover-card/cover-card-editor.ts

@@ -3,14 +3,14 @@ import {
     fireEvent,
     HomeAssistant,
     LovelaceCardEditor,
-    stateIcon,
 } from "custom-card-helpers";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
 import "../../shared/editor/layout-picker";
 import { configElementStyle } from "../../utils/editor-styles";
+import { stateIcon } from "../../utils/icons/state-icon";
 import { EditorTarget } from "../../utils/lovelace/editor/types";
 import { COVER_CARD_EDITOR_NAME, COVER_ENTITY_DOMAINS } from "./const";
 import { CoverCardConfig, coverCardConfigStruct } from "./cover-card-config";

src/cards/cover-card/cover-card.ts

@@ -6,7 +6,6 @@ import {
     HomeAssistant,
     LovelaceCard,
     LovelaceCardEditor,
-    stateIcon,
 } from "custom-card-helpers";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -21,6 +20,7 @@ import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
 import { isActive } from "../../utils/entity";
+import { stateIcon } from "../../utils/icons/state-icon";
 import { getLayoutFromConfig, Layout } from "../../utils/layout";
 import { COVER_CARD_EDITOR_NAME, COVER_CARD_NAME, COVER_ENTITY_DOMAINS } from "./const";
 import "./controls/cover-buttons-control";

src/cards/entity-card/entity-card-editor.ts

@@ -3,7 +3,6 @@ import {
     fireEvent,
     HomeAssistant,
     LovelaceCardEditor,
-    stateIcon,
 } from "custom-card-helpers";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -13,6 +12,7 @@ import "../../shared/editor/color-picker";
 import "../../shared/editor/info-picker";
 import "../../shared/editor/layout-picker";
 import { configElementStyle } from "../../utils/editor-styles";
+import { stateIcon } from "../../utils/icons/state-icon";
 import { EditorTarget } from "../../utils/lovelace/editor/types";
 import { ENTITY_CARD_EDITOR_NAME } from "./const";
 import { EntityCardConfig, entityCardConfigStruct } from "./entity-card-config";

src/cards/entity-card/entity-card.ts

@@ -6,7 +6,6 @@ import {
     HomeAssistant,
     LovelaceCard,
     LovelaceCardEditor,
-    stateIcon,
 } from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -21,6 +20,7 @@ import { computeRgbColor } from "../../utils/colors";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
 import { isActive, isAvailable } from "../../utils/entity";
+import { stateIcon } from "../../utils/icons/state-icon";
 import { getInfo } from "../../utils/info";
 import { getLayoutFromConfig } from "../../utils/layout";
 import { ENTITY_CARD_EDITOR_NAME, ENTITY_CARD_NAME } from "./const";

src/cards/fan-card/fan-card-editor.ts

@@ -3,14 +3,14 @@ import {
     fireEvent,
     HomeAssistant,
     LovelaceCardEditor,
-    stateIcon,
 } from "custom-card-helpers";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
 import "../../shared/editor/layout-picker";
 import { configElementStyle } from "../../utils/editor-styles";
+import { stateIcon } from "../../utils/icons/state-icon";
 import { EditorTarget } from "../../utils/lovelace/editor/types";
 import { FAN_CARD_EDITOR_NAME, FAN_ENTITY_DOMAINS } from "./const";
 import { FanCardConfig, fanCardConfigStruct } from "./fan-card-config";

src/cards/fan-card/fan-card.ts

@@ -6,7 +6,6 @@ import {
     HomeAssistant,
     LovelaceCard,
     LovelaceCardEditor,
-    stateIcon,
 } from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -22,6 +21,7 @@ import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
 import { isActive, isAvailable } from "../../utils/entity";
+import { stateIcon } from "../../utils/icons/state-icon";
 import { getLayoutFromConfig } from "../../utils/layout";
 import { FAN_CARD_EDITOR_NAME, FAN_CARD_NAME, FAN_ENTITY_DOMAINS } from "./const";
 import "./controls/fan-oscillate-control";

src/cards/light-card/light-card-editor.ts

@@ -3,14 +3,14 @@ import {
     fireEvent,
     HomeAssistant,
     LovelaceCardEditor,
-    stateIcon,
 } from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
 import "../../shared/editor/layout-picker";
 import { configElementStyle } from "../../utils/editor-styles";
+import { stateIcon } from "../../utils/icons/state-icon";
 import { EditorTarget } from "../../utils/lovelace/editor/types";
 import { LIGHT_CARD_EDITOR_NAME, LIGHT_ENTITY_DOMAINS } from "./const";
 import { LightCardConfig, lightCardConfigStruct } from "./light-card-config";

src/cards/light-card/light-card.ts

@@ -6,7 +6,6 @@ import {
     HomeAssistant,
     LovelaceCard,
     LovelaceCardEditor,
-    stateIcon,
 } from "custom-card-helpers";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
@@ -22,6 +21,7 @@ import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
 import { isActive } from "../../utils/entity";
+import { stateIcon } from "../../utils/icons/state-icon";
 import { getLayoutFromConfig } from "../../utils/layout";
 import { LIGHT_CARD_EDITOR_NAME, LIGHT_CARD_NAME, LIGHT_ENTITY_DOMAINS } from "./const";
 import "./controls/light-brightness-control";