Use icon in area card if there is no image (#19933)

home-assistant · Mar 4, 2024 · b99072d · b99072d
1 parent b9a7a7c
commit b99072d
Showing 1 changed file with 34 additions and 9 deletions.
diff --git 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;