fix: use same entity icons rules than home assitant frontend

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";

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";

src/cards/person-card/person-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 { PERSON_CARD_EDITOR_NAME, PERSON_ENTITY_DOMAINS } from "./const";
 import { PersonCardConfig, personCardConfigStruct } from "./person-card-config";

src/cards/person-card/person-card.ts

@@ -6,7 +6,6 @@ import {
     HomeAssistant,
     LovelaceCard,
     LovelaceCardEditor,
-    stateIcon as stateIconHelper,
 } from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -19,6 +18,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 as stateIconHelper } from "../../utils/icons/state-icon";
 import { getLayoutFromConfig } from "../../utils/layout";
 import { PERSON_CARD_EDITOR_NAME, PERSON_CARD_NAME, PERSON_ENTITY_DOMAINS } from "./const";
 import { PersonCardConfig } from "./person-card-config";

src/utils/icons/alarm-panel-icon.ts

@@ -0,0 +1,22 @@
+export const alarmPanelIcon = (state?: string) => {
+    switch (state) {
+        case "armed_away":
+            return "mdi:shield-lock";
+        case "armed_vacation":
+            return "mdi:shield-airplane";
+        case "armed_home":
+            return "mdi:shield-home";
+        case "armed_night":
+            return "mdi:shield-moon";
+        case "armed_custom_bypass":
+            return "mdi:security";
+        case "pending":
+            return "mdi:shield-outline";
+        case "triggered":
+            return "mdi:bell-ring";
+        case "disarmed":
+            return "mdi:shield-off";
+        default:
+            return "mdi:shield";
+    }
+};

src/utils/icons/binary-sensor-icon.ts

@@ -0,0 +1,58 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+export const binarySensorIcon = (state?: string, entity?: HassEntity) => {
+    const isOff = state === "off";
+    switch (entity?.attributes.device_class) {
+        case "battery":
+            return isOff ? "mdi:battery" : "mdi:battery-outline";
+        case "battery_charging":
+            return isOff ? "mdi:battery" : "mdi:battery-charging";
+        case "cold":
+            return isOff ? "mdi:thermometer" : "mdi:snowflake";
+        case "connectivity":
+            return isOff ? "mdi:close-network-outline" : "mdi:check-network-outline";
+        case "door":
+            return isOff ? "mdi:door-closed" : "mdi:door-open";
+        case "garage_door":
+            return isOff ? "mdi:garage" : "mdi:garage-open";
+        case "power":
+            return isOff ? "mdi:power-plug-off" : "mdi:power-plug";
+        case "gas":
+        case "problem":
+        case "safety":
+        case "tamper":
+            return isOff ? "mdi:check-circle" : "mdi:alert-circle";
+        case "smoke":
+            return isOff ? "mdi:check-circle" : "mdi:smoke";
+        case "heat":
+            return isOff ? "mdi:thermometer" : "mdi:fire";
+        case "light":
+            return isOff ? "mdi:brightness5" : "mdi:brightness-7";
+        case "lock":
+            return isOff ? "mdi:lock" : "mdi:lock-open";
+        case "moisture":
+            return isOff ? "mdi:water-off" : "mdi:water";
+        case "motion":
+            return isOff ? "mdi:motion-sensor-off" : "mdi:motion-sensor";
+        case "occupancy":
+            return isOff ? "mdi:home-outline" : "mdi:home";
+        case "opening":
+            return isOff ? "mdi:square" : "mdi:square-outline";
+        case "plug":
+            return isOff ? "mdi:power-plug-off" : "mdi:power-plug";
+        case "presence":
+            return isOff ? "mdi:home-outline" : "mdi:home";
+        case "running":
+            return isOff ? "mdi:stop" : "mdi:play";
+        case "sound":
+            return isOff ? "mdi:music-note-off" : "mdi:music-note";
+        case "update":
+            return isOff ? "mdi:package" : "mdi:package-up";
+        case "vibration":
+            return isOff ? "mdi:crop-portrait" : "mdi:vibrate";
+        case "window":
+            return isOff ? "mdi:window-closed" : "mdi:window-open";
+        default:
+            return isOff ? "mdi:radiobox-blank" : "mdi:checkbox-marked-circle";
+    }
+};