Sync selected icon with selected value in new select component (#17573)

src/components/ha-control-select-menu.ts

@@ -13,6 +13,10 @@ import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { debounce } from "../common/util/debounce";
 import { nextRender } from "../common/util/render-status";
+import "./ha-icon";
+import type { HaIcon } from "./ha-icon";
+import "./ha-svg-icon";
+import type { HaSvgIcon } from "./ha-svg-icon";
 
 @customElement("ha-control-select-menu")
 export class HaControlSelectMenu extends SelectBase {
@@ -66,9 +70,7 @@ export class HaControlSelectMenu extends SelectBase {
           @touchend=${this.handleRippleDeactivate}
           @touchcancel=${this.handleRippleDeactivate}
         >
-          <div class="icon">
-            <slot name="icon"></slot>
-          </div>
+          ${this.renderIcon()}
           <div class="content">
             <p id="label" class="label">${this.label}</p>
             ${this.selectedText
@@ -84,6 +86,25 @@ export class HaControlSelectMenu extends SelectBase {
     `;
   }
 
+  private renderIcon() {
+    const index = this.mdcFoundation?.getSelectedIndex();
+    const items = this.menuElement?.items ?? [];
+    const item = index != null ? items[index] : undefined;
+    const icon =
+      item?.querySelector("[slot='graphic']") ??
+      (null as HaSvgIcon | HaIcon | null);
+
+    return html`
+      <div class="icon">
+        ${icon && "path" in icon
+          ? html`<ha-svg-icon .path=${icon.path}></ha-svg-icon>`
+          : icon && "icon" in icon
+          ? html`<ha-icon .path=${icon.icon}></ha-icon>`
+          : html`<slot name="icon"></slot>`}
+      </div>
+    `;
+  }
+
   protected onFocus() {
     this.handleRippleFocus();
     super.onFocus();