Remove default

src/data/entity_registry.ts

@@ -13,7 +13,6 @@ import type { RegistryEntry } from "./registry";
 type EntityCategory = "config" | "diagnostic";
 
 export type EntityRegistryIcon = {
-  default: string;
   state?: Record<string, string>;
 };
 

src/data/icons.ts

@@ -189,7 +189,9 @@ export const entityIcon = async (
       return entry.icon;
     }
     const state = stateValue ?? stateObj.state;
-    return entry.icon.state?.[state] || entry.icon.default;
+    if (entry.icon.state?.[state]) {
+      return entry.icon.state?.[state];
+    }
   }
 
   if (stateObj?.attributes.icon) {
@@ -205,15 +207,15 @@ export const entryIcon = async (
   hass: HomeAssistant,
   entry: EntityRegistryEntry | EntityRegistryDisplayEntry
 ) => {
-  if (entry.icon) {
-    return typeof entry.icon === "string" ? entry.icon : entry.icon.default;
+  if (entry.icon && typeof entry.icon === "string") {
+    return entry.icon;
   }
   const stateObj = hass.states[entry.entity_id] as HassEntity | undefined;
   const domain = computeDomain(entry.entity_id);
   return getEntityIcon(hass, domain, stateObj, undefined, entry);
 };
 
-const getEntityIcon = async (
+export const getEntityIcon = async (
   hass: HomeAssistant,
   domain: string,
   stateObj?: HassEntity,

src/panels/config/entities/dialogs/dialog-entity-state-icon.ts

@@ -1,18 +1,22 @@
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import type { CSSResultGroup } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { until } from "lit/directives/until";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-button";
+import { computeStateDomain } from "../../../../common/entity/compute_state_domain";
+import { getStates } from "../../../../common/entity/get_states";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-area-picker";
+import "../../../../components/ha-button";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-labels-picker";
 import "../../../../components/ha-textfield";
 import "../../../../components/ha-yaml-editor";
-import { EntityRegistryIcon } from "../../../../data/entity_registry";
-import { entryIcon } from "../../../../data/icons";
+import type { EntityRegistryIcon } from "../../../../data/entity_registry";
+import { getEntityIcon } from "../../../../data/icons";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
-import { HomeAssistant } from "../../../../types";
-import { EntityStateIconDialogParams } from "./show-dialog-entity-state-icon";
+import type { HomeAssistant } from "../../../../types";
+import type { EntityStateIconDialogParams } from "./show-dialog-entity-state-icon";
 
 @customElement("dialog-entity-state-icon")
 class DialogEntityStateIcon extends LitElement {
@@ -29,13 +33,7 @@ class DialogEntityStateIcon extends LitElement {
 
     const icon = this._params.icon;
 
-    this._config =
-      typeof icon === "object"
-        ? icon
-        : {
-            default:
-              icon || (await entryIcon(this.hass, this._params.entry)) || "",
-          };
+    this._config = typeof icon === "object" ? icon : {};
 
     await this.updateComplete;
   }
@@ -46,21 +44,47 @@ class DialogEntityStateIcon extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  private get _states() {
+    const entity = this.hass.states[this._params!.entry.entity_id];
+    const states = getStates(entity);
+    return states.filter((s) => !["unknown", "unavailable"].includes(s));
+  }
+
   protected render() {
-    if (!this._params) {
+    if (!this._params || !this._config) {
       return nothing;
     }
 
+    const stateObj = this.hass.states[this._params.entry.entity_id];
+
+    const domain = computeStateDomain(stateObj);
+
     return html`
       <ha-dialog
         open
         @closed=${this.closeDialog}
         .heading=${"Entity state icon"}
       >
-        <ha-yaml-editor
-          .defaultValue=${this._config}
-          @value-changed=${this._dataChanged}
-        ></ha-yaml-editor>
+        ${this._states.map((s) => {
+          const value = this._config?.state?.[s];
+
+          const placeholder = until(
+            getEntityIcon(this.hass, domain, stateObj, s, this._params!.entry)
+          );
+
+          return html`
+            <div class="row">
+              <p>${this.hass.formatEntityState(stateObj, s)}</p>
+              <ha-icon-picker
+                .hass=${this.hass}
+                .id=${s}
+                .value=${value}
+                @value-changed=${this._iconChanged}
+                .placeholder=${placeholder}
+              ></ha-icon-picker>
+            </div>
+          `;
+        })}
 
         <ha-button
           slot="secondaryAction"
@@ -80,8 +104,23 @@ class DialogEntityStateIcon extends LitElement {
     `;
   }
 
-  private _dataChanged(ev): void {
-    this._config = ev.detail.value;
+  private _iconChanged(ev): void {
+    const value = ev.detail.value;
+    const id = ev.currentTarget.id;
+
+    const newConfig = {
+      ...this._config!,
+      state: {
+        ...this._config!.state,
+        [id]: value,
+      },
+    };
+
+    if (!value) {
+      delete newConfig.state[id];
+    }
+
+    this._config = newConfig;
   }
 
   private async _updateEntry(): Promise<void> {
@@ -102,7 +141,25 @@ class DialogEntityStateIcon extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [haStyle, haStyleDialog, css``];
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        .row {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+        }
+        .row p {
+          width: 100px;
+        }
+        .row ha-icon-picker {
+          flex: 1;
+        }
+      `,
+    ];
   }
 }
 

src/panels/config/entities/dialogs/show-dialog-entity-state-icon.ts

@@ -1,5 +1,5 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
-import {
+import type {
   EntityRegistryEntry,
   EntityRegistryIcon,
 } from "../../../../data/entity_registry";

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-formfield/mwc-formfield";
-import { mdiCog, mdiContentCopy } from "@mdi/js";
+import { mdiBrush, mdiContentCopy } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -374,12 +374,11 @@ export class EntityRegistrySettingsEditor extends LitElement {
         >
           ${useStateIcon
             ? html`
-                <ha-icon
+                <ha-state-icon
                   slot="fallback"
-                  .icon=${(this._icon as EntityRegistryIcon).state?.[
-                    stateObj.state
-                  ] || (this._icon as EntityRegistryIcon).default}
-                ></ha-icon>
+                  .hass=${this.hass}
+                  .stateObj=${stateObj}
+                ></ha-state-icon>
               `
             : !this._icon && !stateObj?.attributes.icon && stateObj
               ? html`
@@ -392,7 +391,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
               : nothing}
         </ha-icon-picker>
         <ha-icon-button
-          .path=${mdiCog}
+          .path=${mdiBrush}
           @click=${this._openEntityStateIcon}
         ></ha-icon-button>
       </div>