From bc602f891cf64ae1768d9d99ebcf4146f5eeb3e2 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 7 Oct 2021 12:01:39 +0200
Subject: [PATCH 1/4] Remove ha-icon from ha-label-badge

---
 src/components/entity/ha-state-label-badge.ts | 22 ++++++++++++++-----
 src/components/ha-label-badge.ts              | 11 +---------
 src/panels/lovelace/badges/hui-error-badge.ts |  9 ++++----
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts
index 50bb6a137ea9..9882588fbb30 100644
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -1,3 +1,4 @@
+import { mdiAlert } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -14,11 +15,12 @@ import { computeStateDisplay } from "../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { stateIcon } from "../../common/entity/state_icon";
-import { timerTimeRemaining } from "../../data/timer";
 import { formatNumber } from "../../common/number/format_number";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
+import { timerTimeRemaining } from "../../data/timer";
 import { HomeAssistant } from "../../types";
 import "../ha-label-badge";
+import "../ha-icon";
 
 @customElement("ha-state-label-badge")
 export class HaStateLabelBadge extends LitElement {
@@ -58,16 +60,20 @@ export class HaStateLabelBadge extends LitElement {
         <ha-label-badge
           class="warning"
           label=${this.hass!.localize("state_badge.default.error")}
-          icon="hass:alert"
           description=${this.hass!.localize(
             "state_badge.default.entity_not_found"
           )}
-        ></ha-label-badge>
+        >
+          <ha-svg-icon .path=${mdiAlert}></ha-svg-icon>
+        </ha-label-badge>
       `;
     }
 
     const domain = computeStateDomain(entityState);
 
+    const value = this._computeValue(domain, entityState);
+    const icon = this.icon ? this.icon : this._computeIcon(domain, entityState);
+
     return html`
       <ha-label-badge
         class=${classMap({
@@ -75,8 +81,7 @@ export class HaStateLabelBadge extends LitElement {
           "has-unit_of_measurement":
             "unit_of_measurement" in entityState.attributes,
         })}
-        .value=${this._computeValue(domain, entityState)}
-        .icon=${this.icon ? this.icon : this._computeIcon(domain, entityState)}
+        .value=${value}
         .image=${this.icon
           ? ""
           : this.image
@@ -89,7 +94,12 @@ export class HaStateLabelBadge extends LitElement {
           this._timerTimeRemaining
         )}
         .description=${this.name ?? computeStateName(entityState)}
-      ></ha-label-badge>
+      >
+        ${icon ? html`<ha-icon .icon=${icon}></ha-icon>` : ""}
+        ${value && (this.icon || !this.image)
+          ? html`<span>${value}</span>`
+          : ""}
+      </ha-label-badge>
     `;
   }
 
diff --git a/src/components/ha-label-badge.ts b/src/components/ha-label-badge.ts
index 931230868723..c892416ab4ca 100644
--- a/src/components/ha-label-badge.ts
+++ b/src/components/ha-label-badge.ts
@@ -13,8 +13,6 @@ import "./ha-icon";
 class HaLabelBadge extends LitElement {
   @property() public value?: string;
 
-  @property() public icon?: string;
-
   @property() public label?: string;
 
   @property() public description?: string;
@@ -31,14 +29,7 @@ class HaLabelBadge extends LitElement {
               big: Boolean(this.value && this.value.length > 4),
             })}
           >
-            <slot>
-              ${this.icon && !this.value && !this.image
-                ? html`<ha-icon .icon=${this.icon}></ha-icon>`
-                : ""}
-              ${this.value && !this.image
-                ? html`<span>${this.value}</span>`
-                : ""}
-            </slot>
+            <slot> </slot>
           </div>
           ${this.label
             ? html`
diff --git a/src/panels/lovelace/badges/hui-error-badge.ts b/src/panels/lovelace/badges/hui-error-badge.ts
index f15a5b049074..247d99105f4f 100644
--- a/src/panels/lovelace/badges/hui-error-badge.ts
+++ b/src/panels/lovelace/badges/hui-error-badge.ts
@@ -1,3 +1,4 @@
+import { mdiAlert } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import "../../../components/ha-label-badge";
@@ -32,11 +33,9 @@ export class HuiErrorBadge extends LitElement implements LovelaceBadge {
     }
 
     return html`
-      <ha-label-badge
-        label="Error"
-        icon="hass:alert"
-        description=${this._config.error}
-      ></ha-label-badge>
+      <ha-label-badge label="Error" description=${this._config.error}>
+        <ha-svg-icon .path=${mdiAlert}></ha-svg-icon>
+      </ha-label-badge>
     `;
   }
 

From 2fe1bc4f27dda9b51b14bea0d8a01529bac75933 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 7 Oct 2021 12:06:56 +0200
Subject: [PATCH 2/4] fix

---
 src/components/ha-label-badge.ts              | 6 +++---
 src/panels/lovelace/badges/hui-error-badge.ts | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/ha-label-badge.ts b/src/components/ha-label-badge.ts
index c892416ab4ca..a5c410d5534f 100644
--- a/src/components/ha-label-badge.ts
+++ b/src/components/ha-label-badge.ts
@@ -8,7 +8,7 @@ import {
 } from "lit";
 import { property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import "./ha-icon";
+import "./ha-svg-icon";
 
 class HaLabelBadge extends LitElement {
   @property() public value?: string;
@@ -29,7 +29,7 @@ class HaLabelBadge extends LitElement {
               big: Boolean(this.value && this.value.length > 4),
             })}
           >
-            <slot> </slot>
+            <slot></slot>
           </div>
           ${this.label
             ? html`
@@ -45,7 +45,7 @@ class HaLabelBadge extends LitElement {
             : ""}
         </div>
         ${this.description
-          ? html` <div class="title">${this.description}</div> `
+          ? html`<div class="title">${this.description}</div>`
           : ""}
       </div>
     `;
diff --git a/src/panels/lovelace/badges/hui-error-badge.ts b/src/panels/lovelace/badges/hui-error-badge.ts
index 247d99105f4f..375cac75aba0 100644
--- a/src/panels/lovelace/badges/hui-error-badge.ts
+++ b/src/panels/lovelace/badges/hui-error-badge.ts
@@ -2,6 +2,7 @@ import { mdiAlert } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import "../../../components/ha-label-badge";
+import "../../../components/ha-svg-icon";
 import { HomeAssistant } from "../../../types";
 import { LovelaceBadge } from "../types";
 import { ErrorBadgeConfig } from "./types";

From 4199de04f6176f516ee0bf71997e57856b119aa3 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 7 Oct 2021 12:12:43 +0200
Subject: [PATCH 3/4] Take value out of label badge

---
 src/components/entity/ha-state-label-badge.ts |  8 ++++++--
 src/components/ha-label-badge.ts              | 20 +++++--------------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts
index 9882588fbb30..9f368dfc7f67 100644
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -97,7 +97,9 @@ export class HaStateLabelBadge extends LitElement {
       >
         ${icon ? html`<ha-icon .icon=${icon}></ha-icon>` : ""}
         ${value && (this.icon || !this.image)
-          ? html`<span>${value}</span>`
+          ? html`<span class=${value && value.length > 4 ? "big" : ""}
+              >${value}</span
+            >`
           : ""}
       </ha-label-badge>
     `;
@@ -218,7 +220,9 @@ export class HaStateLabelBadge extends LitElement {
       :host {
         cursor: pointer;
       }
-
+      .big {
+        font-size: 70%;
+      }
       ha-label-badge {
         --ha-label-badge-color: var(--label-badge-red, #df4c1e);
       }
diff --git a/src/components/ha-label-badge.ts b/src/components/ha-label-badge.ts
index a5c410d5534f..7c1d633f4308 100644
--- a/src/components/ha-label-badge.ts
+++ b/src/components/ha-label-badge.ts
@@ -11,8 +11,6 @@ import { classMap } from "lit/directives/class-map";
 import "./ha-svg-icon";
 
 class HaLabelBadge extends LitElement {
-  @property() public value?: string;
-
   @property() public label?: string;
 
   @property() public description?: string;
@@ -23,12 +21,7 @@ class HaLabelBadge extends LitElement {
     return html`
       <div class="badge-container">
         <div class="label-badge" id="badge">
-          <div
-            class=${classMap({
-              value: true,
-              big: Boolean(this.value && this.value.length > 4),
-            })}
-          >
+          <div class="value">
             <slot></slot>
           </div>
           ${this.label
@@ -78,14 +71,15 @@ class HaLabelBadge extends LitElement {
           background-size: cover;
           transition: border 0.3s ease-in-out;
         }
+        .label-badge .label.big span {
+          font-size: 90%;
+          padding: 10% 12% 7% 12%; /* push smaller text a bit down to center vertically */
+        }
         .label-badge .value {
           font-size: 90%;
           overflow: hidden;
           text-overflow: ellipsis;
         }
-        .label-badge .value.big {
-          font-size: 70%;
-        }
         .label-badge .label {
           position: absolute;
           bottom: -1em;
@@ -110,10 +104,6 @@ class HaLabelBadge extends LitElement {
           transition: background-color 0.3s ease-in-out;
           text-transform: var(--ha-label-badge-label-text-transform, uppercase);
         }
-        .label-badge .label.big span {
-          font-size: 90%;
-          padding: 10% 12% 7% 12%; /* push smaller text a bit down to center vertically */
-        }
         .badge-container .title {
           margin-top: 1em;
           font-size: var(--ha-label-badge-title-font-size, 0.9em);

From 49b4901d0e8191726248563b3cfdc6f40e1737e0 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 7 Oct 2021 12:15:27 +0200
Subject: [PATCH 4/4] Update ha-state-label-badge.ts

---
 src/components/entity/ha-state-label-badge.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts
index 9f368dfc7f67..b7001ab861b1 100644
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -81,7 +81,6 @@ export class HaStateLabelBadge extends LitElement {
           "has-unit_of_measurement":
             "unit_of_measurement" in entityState.attributes,
         })}
-        .value=${value}
         .image=${this.icon
           ? ""
           : this.image