Fix icon for unavailable buttons (#7416)

src/components/entity/state-badge.ts

@@ -11,11 +11,14 @@ import {
 } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { styleMap } from "lit-html/directives/style-map";
+
 import { computeActiveState } from "../../common/entity/compute_active_state";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { stateIcon } from "../../common/entity/state_icon";
 import { iconColorCSS } from "../../common/style/icon_color_css";
+
 import type { HomeAssistant } from "../../types";
+
 import "../ha-icon";
 
 export class StateBadge extends LitElement {
@@ -37,7 +40,13 @@ export class StateBadge extends LitElement {
   protected render(): TemplateResult {
     const stateObj = this.stateObj;
 
-    if (!stateObj || !this._showIcon) {
+    if (!stateObj) {
+      return html`<div class="missing">
+        <ha-icon icon="hass:alert"></ha-icon>
+      </div>`;
+    }
+
+    if (!this._showIcon) {
       return html``;
     }
 
@@ -140,6 +149,9 @@ export class StateBadge extends LitElement {
       ha-icon {
         transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
       }
+      .missing {
+        color: #fce588;
+      }
 
       ${iconColorCSS}
     `;