Icon Picker (#10161)

build-scripts/gulp/gen-icons-json.js

@@ -22,17 +22,38 @@ const getMeta = () => {
     const svg = fs.readFileSync(`${ICON_PATH}/${icon.name}.svg`, {
       encoding,
     });
-    return { path: svg.match(/ d="([^"]+)"/)[1], name: icon.name };
+    return {
+      path: svg.match(/ d="([^"]+)"/)[1],
+      name: icon.name,
+      tags: icon.tags,
+    };
   });
 };
 
 const addRemovedMeta = (meta) => {
   const file = fs.readFileSync(REMOVED_ICONS_PATH, { encoding });
   const removed = JSON.parse(file);
-  const combinedMeta = [...meta, ...removed];
+  const removedMeta = removed.map((removeIcon) => ({
+    path: removeIcon.path,
+    name: removeIcon.name,
+    tags: [],
+  }));
+  const combinedMeta = [...meta, ...removedMeta];
   return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
 };
 
+const homeAutomationTag = "Home Automation";
+
+const orderMeta = (meta) => {
+  const homeAutomationMeta = meta.filter((icon) =>
+    icon.tags.includes(homeAutomationTag)
+  );
+  const otherMeta = meta.filter(
+    (icon) => !icon.tags.includes(homeAutomationTag)
+  );
+  return [...homeAutomationMeta, ...otherMeta];
+};
+
 const splitBySize = (meta) => {
   const chunks = [];
   const CHUNK_SIZE = 50000;
@@ -77,8 +98,9 @@ const findDifferentiator = (curString, prevString) => {
 };
 
 gulp.task("gen-icons-json", (done) => {
-  const meta = addRemovedMeta(getMeta());
+  const meta = getMeta();
-  const split = splitBySize(meta);
+  const metaAndRemoved = addRemovedMeta(meta);
+  const split = splitBySize(metaAndRemoved);
 
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
@@ -116,5 +138,12 @@ gulp.task("gen-icons-json", (done) => {
     JSON.stringify({ version: package.version, parts })
   );
 
+  const orderedMeta = orderMeta(meta);
+
+  fs.writeFileSync(
+    path.resolve(OUTPUT_DIR, "iconList.json"),
+    JSON.stringify(orderedMeta.map((icon) => icon.name))
+  );
+
   done();
 });

src/components/ha-icon-picker.ts

@@ -0,0 +1,142 @@
+import "@polymer/paper-input/paper-input";
+import { mdiCheck } from "@mdi/js";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { PolymerChangedEvent } from "../polymer-types";
+import "./ha-icon";
+import iconList from "../../build/mdi/iconList.json";
+
+const mdiIconList = iconList.map((icon) => `mdi:${icon}`);
+
+// eslint-disable-next-line lit/prefer-static-styles
+const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
+    paper-icon-item {
+      padding: 0;
+      margin: -8px;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-icon-item {
+      margin-left: 0;
+    }
+  </style>
+
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+  <paper-icon-item>
+    <ha-icon .icon=${item} slot="item-icon"></ha-icon>
+    <paper-item-body> ${item} </paper-item-body>
+  </paper-icon-item>`;
+
+@customElement("ha-icon-picker")
+export class HaIconPicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public placeholder?: string;
+
+  @property({ attribute: "error-message" }) public errorMessage?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
+
+  @property({ type: Boolean }) private _opened = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <vaadin-combo-box-light
+        item-value-path="icon"
+        item-label-path="icon"
+        .value=${this._value}
+        .allowCustomValue=${true}
+        .filteredItems=${[]}
+        ${comboBoxRenderer(rowRenderer)}
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._valueChanged}
+        @filter-changed=${this._filterChanged}
+      >
+        <paper-input
+          .label=${this.label}
+          .placeholder=${this.placeholder}
+          .disabled=${this.disabled}
+          class="input"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+        >
+          ${!this._opened && (this._value || this.placeholder)
+            ? html`
+                <ha-icon .icon=${this._value || this.placeholder} slot="suffix">
+                </ha-icon>
+              `
+            : ""}
+        </paper-input>
+      </vaadin-combo-box-light>
+    `;
+  }
+
+  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
+  private _valueChanged(ev: PolymerChangedEvent<string>) {
+    this._setValue(ev.detail.value);
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    fireEvent(
+      this,
+      "value-changed",
+      { value },
+      {
+        bubbles: false,
+        composed: false,
+      }
+    );
+  }
+
+  private _filterChanged(ev: CustomEvent): void {
+    const filterString = ev.detail.value.toLowerCase();
+    const characterCount = filterString.length;
+    if (characterCount >= 2) {
+      const filteredItems = mdiIconList.filter((icon) =>
+        icon.toLowerCase().includes(filterString)
+      );
+      if (filteredItems.length > 0) {
+        (this.comboBox as any).filteredItems = filteredItems;
+      } else {
+        (this.comboBox as any).filteredItems = [filterString];
+      }
+    } else {
+      (this.comboBox as any).filteredItems = [];
+    }
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  static get styles() {
+    return css`
+      ha-icon {
+        position: absolute;
+        bottom: 2px;
+        right: 0;
+      }
+    `;
+  }
+}

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

@@ -15,7 +15,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { domainIcon } from "../../../common/entity/domain_icon";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-expansion-panel";
-import "../../../components/ha-icon-input";
+import "../../../components/ha-icon-picker";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
 import {
@@ -133,7 +133,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
           .placeholder=${this.entry.original_name}
           .disabled=${this._submitting}
         ></paper-input>
-        <ha-icon-input
+        <ha-icon-picker
           .value=${this._icon}
           @value-changed=${this._iconChanged}
           .label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")}
@@ -143,10 +143,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
             this.hass.states[this.entry.entity_id]
           )}
           .disabled=${this._submitting}
-          .errorMessage=${this.hass.localize(
+        ></ha-icon-picker>
-            "ui.dialogs.entity_registry.editor.icon_error"
-          )}
-        ></ha-icon-input>
         <paper-input
           .value=${this._entityId}
           @value-changed=${this._entityIdChanged}

src/panels/config/helpers/forms/ha-counter-form.ts

@@ -2,7 +2,7 @@ import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-switch";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import { Counter } from "../../../../data/counter";
@@ -81,14 +81,14 @@ class HaCounterForm extends LitElement {
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>
-        <ha-icon-input
+        <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
-        ></ha-icon-input>
+        ></ha-icon-picker>
         <paper-input
           .value=${this._minimum}
           .configValue=${"minimum"}

src/panels/config/helpers/forms/ha-input_boolean-form.ts

@@ -2,7 +2,7 @@ import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import { InputBoolean } from "../../../../data/input_boolean";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -59,14 +59,14 @@ class HaInputBooleanForm extends LitElement {
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>
-        <ha-icon-input
+        <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
-        ></ha-icon-input>
+        ></ha-icon-picker>
       </div>
     `;
   }

src/panels/config/helpers/forms/ha-input_datetime-form.ts

@@ -4,7 +4,7 @@ import "@polymer/paper-radio-group/paper-radio-group";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import { InputDateTime } from "../../../../data/input_datetime";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -70,14 +70,14 @@ class HaInputDateTimeForm extends LitElement {
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>
-        <ha-icon-input
+        <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
-        ></ha-icon-input>
+        ></ha-icon-picker>
         <br />
         ${this.hass.localize("ui.dialogs.helper_settings.input_datetime.mode")}:
         <br />

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -4,7 +4,7 @@ import "@polymer/paper-radio-group/paper-radio-group";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import { InputNumber } from "../../../../data/input_number";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -85,14 +85,14 @@ class HaInputNumberForm extends LitElement {
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>
-        <ha-icon-input
+        <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
-        ></ha-icon-input>
+        ></ha-icon-picker>
         <paper-input
           .value=${this._min}
           .configValue=${"min"}

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -8,7 +8,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import type { InputSelect } from "../../../../data/input_select";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
@@ -72,14 +72,14 @@ class HaInputSelectForm extends LitElement {
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>
-        <ha-icon-input
+        <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
-        ></ha-icon-input>
+        ></ha-icon-picker>
         ${this.hass!.localize(
           "ui.dialogs.helper_settings.input_select.options"
         )}:

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -4,7 +4,7 @@ import "@polymer/paper-radio-group/paper-radio-group";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import { InputText } from "../../../../data/input_text";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -76,14 +76,14 @@ class HaInputTextForm extends LitElement {
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>
-        <ha-icon-input
+        <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
-        ></ha-icon-input>
+        ></ha-icon-picker>
         ${this.hass.userData?.showAdvanced
           ? html`
               <paper-input

src/panels/config/helpers/forms/ha-timer-form.ts

@@ -1,7 +1,7 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import { DurationDict, Timer } from "../../../../data/timer";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -62,14 +62,14 @@ class HaTimerForm extends LitElement {
           .invalid=${nameInvalid}
           dialogInitialFocus
         ></paper-input>
-        <ha-icon-input
+        <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.icon"
           )}
-        ></ha-icon-input>
+        ></ha-icon-picker>
         <paper-input
           .configValue=${"duration"}
           .value=${this._duration}

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -5,7 +5,7 @@ import { slugify } from "../../../../common/string/slugify";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-formfield";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-switch";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import {
@@ -118,13 +118,13 @@ export class DialogLovelaceDashboardDetail extends LitElement {
                     )}
                     dialogInitialFocus
                   ></paper-input>
-                  <ha-icon-input
+                  <ha-icon-picker
                     .value=${this._icon}
                     @value-changed=${this._iconChanged}
                     .label=${this.hass.localize(
                       "ui.panel.config.lovelace.dashboards.detail.icon"
                     )}
-                  ></ha-icon-input>
+                  ></ha-icon-picker>
                   ${!this._params.dashboard && this.hass.userData?.showAdvanced
                     ? html`
                         <paper-input

src/panels/config/scene/ha-scene-editor.ts

@@ -31,7 +31,7 @@ import "../../../components/entity/ha-entities-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-icon-input";
+import "../../../components/ha-icon-picker";
 import "../../../components/ha-svg-icon";
 import {
   computeDeviceName,
@@ -278,7 +278,7 @@ export class HaSceneEditor extends SubscribeMixin(
                           "ui.panel.config.scene.editor.name"
                         )}
                       ></paper-input>
-                      <ha-icon-input
+                      <ha-icon-picker
                         .label=${this.hass.localize(
                           "ui.panel.config.scene.editor.icon"
                         )}
@@ -286,7 +286,7 @@ export class HaSceneEditor extends SubscribeMixin(
                         .value=${this._config.icon}
                         @value-changed=${this._valueChanged}
                       >
-                      </ha-icon-input>
+                      </ha-icon-picker>
                     </div>
                   </ha-card>
                 </ha-config-section>

src/panels/config/script/ha-script-editor.ts

@@ -30,7 +30,7 @@ import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-icon-input";
+import "../../../components/ha-icon-picker";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
@@ -213,7 +213,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                                 @change=${this._aliasChanged}
                               >
                               </paper-input>
-                              <ha-icon-input
+                              <ha-icon-picker
                                 .label=${this.hass.localize(
                                   "ui.panel.config.script.editor.icon"
                                 )}
@@ -221,7 +221,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                                 .value=${this._config.icon}
                                 @value-changed=${this._valueChanged}
                               >
-                              </ha-icon-input>
+                              </ha-icon-picker>
                               ${!this.scriptEntityId
                                 ? html`<paper-input
                                     .label=${this.hass.localize(

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -6,7 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-switch";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -133,7 +133,7 @@ export class HuiButtonCardEditor
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
-          <ha-icon-input
+          <ha-icon-picker
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
             )} (${this.hass.localize(
@@ -144,7 +144,7 @@ export class HuiButtonCardEditor
             stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
-          ></ha-icon-input>
+          ></ha-icon-picker>
         </div>
         <div class="side-by-side">
           <div>

src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts

@@ -5,7 +5,7 @@ import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-attribute-picker";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import { HomeAssistant } from "../../../../types";
 import { EntityCardConfig } from "../../cards/types";
 import "../../components/hui-action-editor";
@@ -103,7 +103,7 @@ export class HuiEntityCardEditor
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
-          <ha-icon-input
+          <ha-icon-picker
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
             )} (${this.hass.localize(
@@ -114,7 +114,7 @@ export class HuiEntityCardEditor
             stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
-          ></ha-icon-input>
+          ></ha-icon-picker>
         </div>
         <div class="side-by-side">
           <ha-entity-attribute-picker

src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts

@@ -6,7 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/ha-formfield";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { EntitiesCardEntityConfig } from "../../cards/types";
@@ -83,7 +83,7 @@ export class HuiGenericEntityRowEditor
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
-          <ha-icon-input
+          <ha-icon-picker
             .label=${this.hass!.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
             )}
@@ -91,7 +91,7 @@ export class HuiGenericEntityRowEditor
             .placeholder=${stateIcon(this.hass!.states[this._config.entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
-          ></ha-icon-input>
+          ></ha-icon-picker>
         </div>
         <paper-dropdown-menu .label=${"Secondary Info"}>
           <paper-listbox

src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string, assign } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { LightCardConfig } from "../../cards/types";
@@ -109,7 +109,7 @@ export class HuiLightCardEditor
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
-          <ha-icon-input
+          <ha-icon-picker
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
             )} (${this.hass.localize(
@@ -120,7 +120,7 @@ export class HuiLightCardEditor
             stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
-          ></ha-icon-input>
+          ></ha-icon-picker>
         </div>
 
         <hui-theme-select-editor

src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts

@@ -9,7 +9,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-formfield";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { SensorCardConfig } from "../../cards/types";
@@ -114,7 +114,7 @@ export class HuiSensorCardEditor
           @value-changed=${this._valueChanged}
         ></paper-input>
         <div class="side-by-side">
-          <ha-icon-input
+          <ha-icon-picker
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
             )} (${this.hass.localize(
@@ -125,7 +125,7 @@ export class HuiSensorCardEditor
             stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
-          ></ha-icon-input>
+          ></ha-icon-picker>
           <paper-dropdown-menu
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.sensor.graph_type"

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { slugify } from "../../../../common/string/slugify";
 import "../../../../components/ha-formfield";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-switch";
 import { LovelaceViewConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -94,7 +94,7 @@ export class HuiViewEditor extends LitElement {
           @value-changed=${this._valueChanged}
           @blur=${this._handleTitleBlur}
         ></paper-input>
-        <ha-icon-input
+        <ha-icon-picker
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.icon"
           )} (${this.hass.localize(
@@ -104,7 +104,7 @@ export class HuiViewEditor extends LitElement {
           .placeholder=${this._icon}
           .configValue=${"icon"}
           @value-changed=${this._valueChanged}
-        ></ha-icon-input>
+        ></ha-icon-picker>
         <paper-input
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.url"