Add options to badges (#3552)

* Add options to badges

name
icon
entity_picture

* lint

* lint

* rename entityPicture to image

src/components/entity/ha-state-label-badge.ts

@@ -29,6 +29,12 @@ export class HaStateLabelBadge extends LitElement {
 
   @property() public state?: HassEntity;
 
+  @property() public name?: string;
+
+  @property() public icon?: string;
+
+  @property() public image?: string;
+
   @property() private _timerTimeRemaining?: number;
 
   private _connected?: boolean;
@@ -72,10 +78,14 @@ export class HaStateLabelBadge extends LitElement {
           "has-unit_of_measurement": "unit_of_measurement" in state.attributes,
         })}"
         .value="${this._computeValue(domain, state)}"
-        .icon="${this._computeIcon(domain, state)}"
+        .icon="${this.icon ? this.icon : this._computeIcon(domain, state)}"
-        .image="${state.attributes.entity_picture}"
+        .image="${this.icon
+          ? ""
+          : this.image
+          ? this.image
+          : state.attributes.entity_picture}"
         .label="${this._computeLabel(domain, state, this._timerTimeRemaining)}"
-        .description="${computeStateName(state)}"
+        .description="${this.name ? this.name : computeStateName(state)}"
       ></ha-label-badge>
     `;
   }

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

@@ -5,6 +5,7 @@ export interface EntityConfig {
   type?: string;
   name?: string;
   icon?: string;
+  image?: string;
 }
 export interface DividerConfig {
   type: "divider";

src/panels/lovelace/hui-view.ts

@@ -24,6 +24,7 @@ import { showEditCardDialog } from "./editor/card-editor/show-edit-card-dialog";
 import { HuiErrorCard } from "./cards/hui-error-card";
 
 import { computeRTL } from "../../common/util/compute_rtl";
+import { processConfigEntities } from "./common/process-config-entities";
 
 let editCodeLoaded = false;
 
@@ -262,10 +263,15 @@ export class HUIView extends LitElement {
     }
 
     const elements: HUIView["_badges"] = [];
-    for (const entityId of config.badges) {
+    const badges = processConfigEntities(config.badges);
+    for (const badge of badges) {
       const element = document.createElement("ha-state-label-badge");
+      const entityId = badge.entity;
       element.hass = this.hass;
       element.state = this.hass!.states[entityId];
+      element.name = badge.name;
+      element.icon = badge.icon;
+      element.image = badge.image;
       elements.push({ element, entityId });
       root.appendChild(element);
     }