icon_color option for entities

src/common/entity/compute_color.ts

@@ -0,0 +1,19 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+export const computeColor = (
+  stateObj?: HassEntity,
+  iconColor?: string
+): string => {
+  if (iconColor) {
+    return iconColor;
+  }
+
+  if (!stateObj || !stateObj.attributes.hs_color) {
+    return "";
+  }
+  const [hue, sat] = stateObj.attributes.hs_color;
+  if (sat <= 10) {
+    return "";
+  }
+  return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
+};

src/components/entity/state-badge.ts

@@ -21,6 +21,7 @@ class StateBadge extends LitElement {
   public hass?: HomeAssistant;
   @property() public stateObj?: HassEntity;
   @property() public overrideIcon?: string;
+  @property() public overrideIconColor?: string;
   @property() public overrideImage?: string;
   @query("ha-icon") private _icon!: HaIcon;
 
@@ -67,7 +68,9 @@ class StateBadge extends LitElement {
         hostStyle.backgroundImage = `url(${imageUrl})`;
         iconStyle.display = "none";
       } else {
-        if (stateObj.attributes.hs_color) {
+        if (this.overrideIconColor) {
+          iconStyle.color = this.overrideIconColor;
+        } else if (stateObj.attributes.hs_color) {
           const hue = stateObj.attributes.hs_color[0];
           const sat = stateObj.attributes.hs_color[1];
           if (sat > 10) {

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -28,6 +28,7 @@ import { longPress } from "../common/directives/long-press-directive";
 import { handleClick } from "../common/handle-click";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { EntityButtonCardConfig } from "./types";
+import { computeColor } from "../../../common/entity/compute_color";
 
 @customElement("hui-entity-button-card")
 class HuiEntityButtonCard extends LitElement implements LovelaceCard {
@@ -130,7 +131,7 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
                 .icon="${this._config.icon || stateIcon(stateObj)}"
                 style="${styleMap({
                   filter: this._computeBrightness(stateObj),
-                  color: this._computeColor(stateObj),
+                  color: computeColor(stateObj, this._config.icon_color),
                   height: this._config.icon_height
                     ? this._config.icon_height
                     : "auto",
@@ -201,17 +202,6 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
     return `brightness(${(brightness + 245) / 5}%)`;
   }
 
-  private _computeColor(stateObj: HassEntity | LightEntity): string {
-    if (!stateObj.attributes.hs_color) {
-      return "";
-    }
-    const [hue, sat] = stateObj.attributes.hs_color;
-    if (sat <= 10) {
-      return "";
-    }
-    return `hsl(${hue}, 100%, ${100 - sat / 2}%)`;
-  }
-
   private _handleTap() {
     handleClick(this, this.hass!, this._config!, false);
   }

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

@@ -203,6 +203,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
                 .stateObj=${stateObj}
                 .overrideIcon=${entityConf.icon}
                 .overrideImage=${entityConf.image}
+                .overrideIconColor=${entityConf.icon_color}
               ></state-badge>
             `
           : ""}

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -27,6 +27,8 @@ import { longPress } from "../common/directives/long-press-directive";
 import { processConfigEntities } from "../common/process-config-entities";
 import { handleClick } from "../common/handle-click";
 import { PictureGlanceCardConfig, ConfigEntity } from "./types";
+import { styleMap } from "lit-html/directives/style-map";
+import { computeColor } from "../../../common/entity/compute_color";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]);
@@ -205,6 +207,9 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
           this.hass!.language
         )}
           `}"
+        style=${styleMap({
+          color: computeColor(stateObj, entityConf.icon_color),
+        })}
       ></ha-icon>
     `;
   }

src/panels/lovelace/cards/types.ts

@@ -42,6 +42,7 @@ export interface EntityButtonCardConfig extends LovelaceCardConfig {
   name?: string;
   show_name?: boolean;
   icon?: string;
+  icon_color?: string;
   show_icon?: boolean;
   theme?: string;
   tap_action?: ActionConfig;

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -52,6 +52,7 @@ class HuiGenericEntityRow extends LitElement {
         .stateObj=${stateObj}
         .overrideIcon=${this.config.icon}
         .overrideImage=${this.config.image}
+        .overrideIconColor=${this.config.icon_color}
       ></state-badge>
       <div class="flex">
         <div class="info">

src/panels/lovelace/elements/hui-icon-element.ts

@@ -15,6 +15,8 @@ import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { LovelaceElement, IconElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
+import { styleMap } from "lit-html/directives/style-map";
+import { computeColor } from "../../../common/entity/compute_color";
 
 @customElement("hui-icon-element")
 export class HuiIconElement extends LitElement implements LovelaceElement {
@@ -41,6 +43,9 @@ export class HuiIconElement extends LitElement implements LovelaceElement {
         @ha-click="${this._handleTap}"
         @ha-hold="${this._handleHold}"
         .longPress="${longPress()}"
+        style=${styleMap({
+          color: computeColor(undefined, this._config.icon_color),
+        })}
       ></ha-icon>
     `;
   }

src/panels/lovelace/elements/hui-state-icon-element.ts

@@ -63,6 +63,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
         @ha-hold="${this._handleHold}"
         .longPress="${longPress()}"
         .overrideIcon=${this._config.icon}
+        .overrideIconColor=${this._config.icon_color}
       ></state-badge>
     `;
   }

src/panels/lovelace/elements/types.ts

@@ -23,6 +23,7 @@ export interface IconElementConfig extends LovelaceElementConfig {
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   icon: string;
+  icon_color?: string;
 }
 
 export interface ImageElementConfig extends LovelaceElementConfig {
@@ -53,6 +54,7 @@ export interface StateIconElementConfig extends LovelaceElementConfig {
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   icon?: string;
+  icon_color?: string;
 }
 
 export interface StateLabelElementConfig extends LovelaceElementConfig {

src/panels/lovelace/entity-rows/types.ts

@@ -5,6 +5,7 @@ export interface EntityConfig {
   type?: string;
   name?: string;
   icon?: string;
+  icon_color?: string;
   image?: string;
 }
 export interface EntityFilterEntityConfig extends EntityConfig {