Use entity registry icon directly (#19466)

src/components/ha-state-icon.ts

@@ -17,10 +17,12 @@ export class HaStateIcon extends LitElement {
   @property() public icon?: string;
 
   protected render() {
-    if (this.icon || this.stateObj?.attributes.icon) {
-      return html`<ha-icon
-        .icon=${this.icon || this.stateObj?.attributes.icon}
-      ></ha-icon>`;
+    const overrideIcon =
+      this.icon ||
+      (this.stateObj && this.hass?.entities[this.stateObj.entity_id]?.icon) ||
+      this.stateObj?.attributes.icon;
+    if (overrideIcon) {
+      return html`<ha-icon .icon=${overrideIcon}></ha-icon>`;
     }
     if (!this.stateObj) {
       return nothing;

src/data/entity_registry.ts

@@ -15,6 +15,7 @@ type entityCategory = "config" | "diagnostic";
 export interface EntityRegistryDisplayEntry {
   entity_id: string;
   name?: string;
+  icon?: string;
   device_id?: string;
   area_id?: string;
   hidden?: boolean;
@@ -31,6 +32,7 @@ export interface EntityRegistryDisplayEntryResponse {
     ai?: string;
     ec?: number;
     en?: string;
+    ic?: string;
     pl?: string;
     tk?: string;
     hb?: boolean;

src/data/icons.ts

@@ -75,6 +75,9 @@ export const entityIcon = async (hass: HomeAssistant, state: HassEntity) => {
   let icon: string | undefined;
   const domain = computeStateDomain(state);
   const entity = hass.entities?.[state.entity_id];
+  if (entity?.icon) {
+    return entity.icon;
+  }
   if (entity?.translation_key && entity.platform) {
     const platformIcons = await getPlatformIcons(hass, entity.platform);
     if (platformIcons) {

src/state/connection-mixin.ts

@@ -239,6 +239,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
                 ? entityReg.entity_categories[entity.ec]
                 : undefined,
             name: entity.en,
+            icon: entity.ic,
             hidden: entity.hb,
             display_precision: entity.dp,
           };