Merge d3fa912acf into 634e1dbde8

src/panels/lovelace/strategies/areas/areas-dashboard-strategy.ts

@@ -23,6 +23,7 @@ export interface AreasDashboardStrategyConfig {
     order?: string[];
   };
   areas_options?: Record<string, AreaOptions>;
+  show_icons?: boolean;
 }
 
 @customElement("areas-dashboard-strategy")
@@ -65,6 +66,7 @@ export class AreasDashboardStrategy extends ReactiveElement {
 
       return {
         title: area.name,
+        icon: config.show_icons && area.icon ? area.icon : undefined,
         path: path,
         strategy: {
           type: "area",

src/panels/lovelace/strategies/areas/editor/hui-areas-dashboard-strategy-editor.ts

@@ -22,6 +22,19 @@ import {
   type AreaRegistryEntry,
 } from "../../../../../data/area_registry";
 import { buttonLinkStyle } from "../../../../../resources/styles";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../../components/ha-form/types";
+
+const SCHEMA = [
+  {
+    name: "show_icons",
+    selector: {
+      boolean: {},
+    },
+  },
+] as const satisfies readonly HaFormSchema[];
 
 @customElement("hui-areas-dashboard-strategy-editor")
 export class HuiAreasDashboardStrategyEditor
@@ -133,6 +146,13 @@ export class HuiAreasDashboardStrategyEditor
         show-navigation-button
         @item-display-navigate-clicked=${this._handleAreaNavigate}
       ></ha-areas-display-editor>
+      <ha-form
+        .hass=${this.hass}
+        .data=${this._config}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeFormLabelCallback}
+        @value-changed=${this._formValueChanged}
+      ></ha-form>
     `;
   }
 
@@ -186,11 +206,28 @@ export class HuiAreasDashboardStrategyEditor
           },
         },
       },
+      show_icons: this._config!.show_icons,
     };
 
     fireEvent(this, "config-changed", { config: newConfig });
   }
 
+  private _formValueChanged(ev: CustomEvent): void {
+    const data = ev.detail.value;
+    fireEvent(this, "config-changed", { config: data });
+  }
+
+  private _computeFormLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    switch (schema.name) {
+      case "show_icons":
+        return this.hass?.localize(
+          `ui.panel.lovelace.editor.strategy.areas.show_icons`
+        );
+      default:
+        return "";
+    }
+  };
+
   static get styles() {
     return [
       buttonLinkStyle,

src/translations/en.json

@@ -7846,7 +7846,8 @@
             },
             "areas": {
               "areas_display": "Areas to display",
-              "no_entities": "No entities in this group, the section will not be displayed"
+              "no_entities": "No entities in this group, the section will not be displayed",
+              "show_icons": "Display area icons"
             }
           },
           "view": {