Add option to show icons for areas dashboard strategy

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

@@ -23,6 +23,7 @@
     order?: string[];
   };
   areas_options?: Record<string, AreaOptions>;
+  show_icons?: boolean;
 }
 
 @customElement("areas-dashboard-strategy")
@@ -59,12 +60,13 @@
       config.areas_display?.order
     );
 
     const areaViews = areas.map<LovelaceViewRawConfig>((area) => {
       const path = computeAreaPath(area.area_id);
       const areaConfig = config.areas_options?.[area.area_id];
 
       return {
         title: area.name,
+        icon: config.show_icons ? 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

@@ -7836,7 +7836,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": "Show assigned area icons on the dashboard tabs"
             }
           },
           "view": {