Add icon support to gauge (#8081)

src/common/entity/compute_state_display.ts

@@ -63,7 +63,7 @@ export const computeStateDisplay = (
 
   if (domain === "humidifier") {
     if (compareState === "on" && stateObj.attributes.humidity) {
-      return `${stateObj.attributes.humidity}%`;
+      return `${stateObj.attributes.humidity} %`;
     }
   }
 

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -14,6 +14,7 @@ import { styleMap } from "lit-html/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import { stateIcon } from "../../../common/entity/state_icon";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import "../../../components/ha-card";
 import "../../../components/ha-gauge";
@@ -139,8 +140,11 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
             "--gauge-color": this._computeSeverity(state),
           })}
         ></ha-gauge>
-        <div class="name">
-          ${this._config.name || computeStateName(stateObj)}
+        <div class="row">
+          <ha-icon .icon=${this._config.icon || stateIcon(stateObj)}></ha-icon>
+          <div class="name">
+            ${this._config.name || computeStateName(stateObj)}
+          </div>
         </div>
       </ha-card>
     `;
@@ -232,13 +236,25 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
         max-width: 250px;
       }
 
+      .row {
+        display: flex;
+        justify-content: space-around;
+        margin-top: 4px;
+        align-items: center;
+      }
+
       .name {
         text-align: center;
         line-height: initial;
-        color: var(--primary-text-color);
+        color: var(--secondary-text-color);
         width: 100%;
-        font-size: 15px;
-        margin-top: 8px;
+        font-size: 16px;
+        font-weight: 500;
+      }
+
+      ha-icon {
+        color: var(--state-icon-color, #44739e);
+        margin-right: 4px;
       }
     `;
   }

src/panels/lovelace/cards/types.ts

@@ -115,6 +115,7 @@ export interface GaugeCardConfig extends LovelaceCardConfig {
   max?: number;
   severity?: SeverityConfig;
   theme?: string;
+  icon?: string;
 }
 
 export interface ConfigEntity extends EntityConfig {

src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts

@@ -12,8 +12,10 @@ import {
 import { assert, number, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
+import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-icon-input";
 import { HomeAssistant } from "../../../../types";
 import { GaugeCardConfig, SeverityConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
@@ -31,6 +33,7 @@ const cardConfigStruct = object({
   max: optional(number()),
   severity: optional(object()),
   theme: optional(string()),
+  icon: optional(string()),
 });
 
 const includeDomains = ["sensor"];
@@ -75,6 +78,10 @@ export class HuiGaugeCardEditor extends LitElement
     return this._config!.severity || undefined;
   }
 
+  get _icon(): string {
+    return this._config!.icon || "";
+  }
+
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
@@ -105,16 +112,30 @@ export class HuiGaugeCardEditor extends LitElement
           .configValue=${"name"}
           @value-changed="${this._valueChanged}"
         ></paper-input>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.unit"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._unit}"
-          .configValue=${"unit"}
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
+        <div class="side-by-side">
+          <paper-input
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.unit"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
+            .value="${this._unit}"
+            .configValue=${"unit"}
+            @value-changed="${this._valueChanged}"
+          ></paper-input>
+          <ha-icon-input
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.icon"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
+            .value=${this._icon}
+            .placeholder=${this._icon ||
+            stateIcon(this.hass.states[this._entity])}
+            .configValue=${"icon"}
+            @value-changed=${this._valueChanged}
+          ></ha-icon-input>
+        </div>
         <hui-theme-select-editor
           .hass=${this.hass}
           .value="${this._theme}"