Remove ha-icon from ha-label-badge

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,25 +60,28 @@ 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({
           [domain]: true,
           "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>
     `;
   }
 

src/components/ha-label-badge.ts

@@ -8,13 +8,11 @@ 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;
 
-  @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`
@@ -54,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>
     `;

src/panels/lovelace/badges/hui-error-badge.ts

@@ -1,6 +1,8 @@
+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";
@@ -32,11 +34,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>
     `;
   }