From f0062b1e670407deb22fb5daf2f31be5e8066e1c Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Mon, 18 Oct 2021 01:39:13 +0200
Subject: [PATCH] Only render badge value if there is no icon and no image
 (#10310)

---
 src/components/entity/ha-state-label-badge.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts
index fa84be3fc2..8196d2bdd5 100644
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -69,9 +69,13 @@ export class HaStateLabelBadge extends LitElement {
       `;
     }
 
+    // Rendering priority inside badge:
+    // 1. Icon directly defined in badge config
+    // 2. Image directly defined in badge config
+    // 3. Image taken from entity picture
+    // 4. Icon determined via entity state
+    // 5. Value string as fallback
     const domain = computeStateDomain(entityState);
-
-    const value = this._computeValue(domain, entityState);
     const icon = this.icon ? this.icon : this._computeIcon(domain, entityState);
     const image = this.icon
       ? ""
@@ -79,6 +83,8 @@ export class HaStateLabelBadge extends LitElement {
       ? this.image
       : entityState.attributes.entity_picture_local ||
         entityState.attributes.entity_picture;
+    const value =
+      !image && !icon ? this._computeValue(domain, entityState) : undefined;
 
     return html`
       <ha-label-badge
@@ -96,7 +102,7 @@ export class HaStateLabelBadge extends LitElement {
         .description=${this.name ?? computeStateName(entityState)}
       >
         ${!image && icon ? html`<ha-icon .icon=${icon}></ha-icon>` : ""}
-        ${value && (this.icon || !this.image)
+        ${value && !icon && !image
           ? html`<span class=${value && value.length > 4 ? "big" : ""}
               >${value}</span
             >`