Tweak icon picker a bit (#10319)

src/components/ha-icon-picker.ts

@@ -1,14 +1,17 @@
+import { mdiCheck, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
-import { mdiCheck } from "@mdi/js";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } 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";
+import "./ha-icon-button";
 
-const mdiIconList = iconList.map((icon) => `mdi:${icon}`);
+let mdiIconList: string[] = [];
 
 // eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
@@ -35,7 +38,7 @@ const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<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-item-body>${item}</paper-item-body>
   </paper-icon-item>`;
 
 @customElement("ha-icon-picker")
@@ -52,6 +55,8 @@ export class HaIconPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @state() private _opened = false;
+
   @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
 
   protected render(): TemplateResult {
@@ -60,9 +65,10 @@ export class HaIconPicker extends LitElement {
         item-value-path="icon"
         item-label-path="icon"
         .value=${this._value}
-        .allowCustomValue=${true}
-        .filteredItems=${[]}
+        allow-custom-value
+        .filteredItems=${mdiIconList}
         ${comboBoxRenderer(rowRenderer)}
+        @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}
       >
@@ -78,20 +84,34 @@ export class HaIconPicker extends LitElement {
         >
           ${this._value || this.placeholder
             ? html`
-                <ha-icon .icon=${this._value || this.placeholder} slot="suffix">
+                <ha-icon .icon=${this._value || this.placeholder} slot="prefix">
                 </ha-icon>
               `
             : this.fallbackPath
             ? html`<ha-svg-icon
                 .path=${this.fallbackPath}
-                slot="suffix"
+                slot="prefix"
               ></ha-svg-icon>`
             : ""}
+          <ha-icon-button
+            .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+            slot="suffix"
+            class="toggle-button"
+          ></ha-icon-button>
         </paper-input>
       </vaadin-combo-box-light>
     `;
   }
 
+  private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+    if (this._opened && !mdiIconList.length) {
+      const iconList = await import("../../build/mdi/iconList.json");
+      mdiIconList = iconList.default.map((icon) => `mdi:${icon}`);
+      (this.comboBox as any).filteredItems = mdiIconList;
+    }
+  }
+
   private _valueChanged(ev: PolymerChangedEvent<string>) {
     this._setValue(ev.detail.value);
   }
@@ -114,7 +134,7 @@ export class HaIconPicker extends LitElement {
     const characterCount = filterString.length;
     if (characterCount >= 2) {
       const filteredItems = mdiIconList.filter((icon) =>
-        icon.toLowerCase().includes(filterString)
+        icon.includes(filterString)
       );
       if (filteredItems.length > 0) {
         (this.comboBox as any).filteredItems = filteredItems;
@@ -122,7 +142,7 @@ export class HaIconPicker extends LitElement {
         (this.comboBox as any).filteredItems = [filterString];
       }
     } else {
-      (this.comboBox as any).filteredItems = [];
+      (this.comboBox as any).filteredItems = mdiIconList;
     }
   }
 
@@ -137,6 +157,20 @@ export class HaIconPicker extends LitElement {
         position: relative;
         bottom: 2px;
       }
+      *[slot="prefix"] {
+        margin-right: 8px;
+      }
+      paper-input > ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        padding: 2px;
+        color: var(--secondary-text-color);
+      }
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-picker": HaIconPicker;
+  }
+}