From 2fb1dd0ec11d8dd6ad96507c65ee3328f26cbc74 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 1 May 2023 14:28:26 +0200
Subject: [PATCH] Add icon at unsupported message in voice settings (#16358)

---
 .../voice-assistants/entity-voice-settings.ts     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/panels/config/voice-assistants/entity-voice-settings.ts b/src/panels/config/voice-assistants/entity-voice-settings.ts
index bc5a3b9a8d..b985447260 100644
--- a/src/panels/config/voice-assistants/entity-voice-settings.ts
+++ b/src/panels/config/voice-assistants/entity-voice-settings.ts
@@ -1,3 +1,4 @@
+import { mdiAlertCircle } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -32,8 +33,8 @@ import {
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
 import {
-  GoogleEntity,
   fetchCloudGoogleEntity,
+  GoogleEntity,
 } from "../../../data/google_assistant";
 import { exposeEntities, voiceAssistants } from "../../../data/voice";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
@@ -223,7 +224,8 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
                 />
                 <span slot="heading">${voiceAssistants[key].name}</span>
                 ${!supported
-                  ? html`<div slot="description">
+                  ? html`<div slot="description" class="unsupported">
+                      <ha-svg-icon .path=${mdiAlertCircle}></ha-svg-icon>
                       ${this.hass.localize(
                         "ui.dialogs.voice-settings.unsupported"
                       )}
@@ -379,6 +381,15 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
         ha-checkbox {
           --mdc-checkbox-state-layer-size: 40px;
         }
+        .unsupported {
+          display: flex;
+          align-items: center;
+        }
+        .unsupported ha-svg-icon {
+          color: var(--error-color);
+          --mdc-icon-size: 16px;
+          margin-right: 4px;
+        }
         .header {
           margin-top: 8px;
           margin-bottom: 4px;