From b99072d986133f7ddbc772047dfedd46ddc1e656 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 4 Mar 2024 15:31:07 +0100
Subject: [PATCH] Use icon in area card if there is no image (#19933)

---
 src/panels/lovelace/cards/hui-area-card.ts | 43 +++++++++++++++++-----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts
index ecd9dda6b3..d11cab9475 100644
--- a/src/panels/lovelace/cards/hui-area-card.ts
+++ b/src/panels/lovelace/cards/hui-area-card.ts
@@ -418,15 +418,24 @@ export class HuiAreaCard
         })}
       >
         ${area.picture || cameraEntityId
-          ? html`<hui-image
-              .config=${this._config}
-              .hass=${this.hass}
-              .image=${area.picture ? area.picture : undefined}
-              .cameraImage=${cameraEntityId}
-              .cameraView=${this._config.camera_view}
-              .aspectRatio=${this._config.aspect_ratio || DEFAULT_ASPECT_RATIO}
-            ></hui-image>`
-          : ""}
+          ? html`
+              <hui-image
+                .config=${this._config}
+                .hass=${this.hass}
+                .image=${area.picture ? area.picture : undefined}
+                .cameraImage=${cameraEntityId}
+                .cameraView=${this._config.camera_view}
+                .aspectRatio=${this._config.aspect_ratio ||
+                DEFAULT_ASPECT_RATIO}
+              ></hui-image>
+            `
+          : area.icon
+            ? html`
+                <div class="icon-container">
+                  <ha-icon icon=${area.icon}></ha-icon>
+                </div>
+              `
+            : nothing}
 
         <div
           class="container ${classMap({
@@ -559,6 +568,22 @@ export class HuiAreaCard
         opacity: 0.12;
       }
 
+      .icon-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .icon-container ha-icon {
+        --mdc-icon-size: 60px;
+        color: var(--sidebar-selected-icon-color);
+      }
+
       .sensors {
         color: #e3e3e3;
         font-size: 16px;