Improve icon picker

src/components/ha-icon-picker.ts

@@ -96,6 +96,9 @@ export class HaIconPicker extends LitElement {
 
   @property({ type: Boolean }) public invalid = false;
 
+  @property({ type: Boolean, attribute: "force-fallback-icon" })
+  public forceFallbackIcon = false;
+
   protected render(): TemplateResult {
     return html`
       <ha-combo-box
@@ -117,7 +120,7 @@ export class HaIconPicker extends LitElement {
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
       >
-        ${this._value || this.placeholder
+        ${(this._value || this.placeholder) && !this.forceFallbackIcon
           ? html`
               <ha-icon .icon=${this._value || this.placeholder} slot="icon">
               </ha-icon>

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

@@ -29,15 +29,20 @@ class DialogEntityStateIcon extends LitElement {
 
     const icon = this._params.icon;
 
-    this._config = icon ?? {
-      default: icon || (await entryIcon(this.hass, this._params.entry)) || "",
-    };
+    this._config =
+      typeof icon === "object"
+        ? icon
+        : {
+            default:
+              icon || (await entryIcon(this.hass, this._params.entry)) || "",
+          };
 
     await this.updateComplete;
   }
 
   public closeDialog(): void {
     this._params = undefined;
+    this._config = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -83,7 +88,9 @@ class DialogEntityStateIcon extends LitElement {
     this._submitting = true;
     try {
       const icon =
-        Object.keys(this._config!).length === 0 ? null : this._config!;
+        !this._config || Object.keys(this._config).length === 0
+          ? null
+          : this._config;
       this._params!.updateIcon(icon);
       this.closeDialog();
     } catch (err: any) {

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

@@ -352,7 +352,10 @@ export class EntityRegistrySettingsEditor extends LitElement {
   }
 
   private _renderIconPicker(stateObj: HassEntity) {
-    const value = typeof this._icon === "object" ? "" : this._icon;
+    const useStateIcon = typeof this._icon === "object";
+
+    const value = useStateIcon ? "Custom state icons" : this._icon;
+
     const placeholder =
       this.entry.original_icon ||
       (stateObj && until(entityIcon(this.hass, stateObj))) ||
@@ -367,16 +370,26 @@ export class EntityRegistrySettingsEditor extends LitElement {
           .label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")}
           .placeholder=${placeholder}
           .disabled=${this.disabled}
+          .forceFallbackIcon=${useStateIcon}
         >
-          ${!this._icon && !stateObj?.attributes.icon && stateObj
+          ${useStateIcon
             ? html`
-                <ha-state-icon
+                <ha-icon
                   slot="fallback"
-                  .hass=${this.hass}
-                  .stateObj=${stateObj}
-                ></ha-state-icon>
+                  .icon=${(this._icon as EntityRegistryIcon).state?.[
+                    stateObj.state
+                  ] || (this._icon as EntityRegistryIcon).default}
+                ></ha-icon>
               `
-            : nothing}
+            : !this._icon && !stateObj?.attributes.icon && stateObj
+              ? html`
+                  <ha-state-icon
+                    slot="fallback"
+                    .hass=${this.hass}
+                    .stateObj=${stateObj}
+                  ></ha-state-icon>
+                `
+              : nothing}
         </ha-icon-picker>
         <ha-icon-button
           .path=${mdiCog}