fix spinner in tts try dialog (#24867)

src/components/buttons/ha-progress-button.ts

@@ -1,13 +1,15 @@
-import "@material/mwc-button";
 import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../ha-button";
 import "../ha-spinner";
 import "../ha-svg-icon";
 
 @customElement("ha-progress-button")
 export class HaProgressButton extends LitElement {
+  @property() public label?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public progress = false;
@@ -21,14 +23,16 @@ export class HaProgressButton extends LitElement {
   public render(): TemplateResult {
     const overlay = this._result || this.progress;
     return html`
-      <mwc-button
-        ?raised=${this.raised}
+      <ha-button
+        .raised=${this.raised}
+        .label=${this.label}
         .unelevated=${this.unelevated}
         .disabled=${this.disabled || this.progress}
         class=${this._result || ""}
       >
+        <slot name="icon" slot="icon"></slot>
         <slot></slot>
-      </mwc-button>
+      </ha-button>
       ${!overlay
         ? nothing
         : html`
@@ -68,12 +72,12 @@ export class HaProgressButton extends LitElement {
       pointer-events: none;
     }
 
-    mwc-button {
+    ha-button {
       transition: all 1s;
       pointer-events: initial;
     }
 
-    mwc-button.success {
+    ha-button.success {
       --mdc-theme-primary: white;
       background-color: var(--success-color);
       transition: none;
@@ -81,13 +85,13 @@ export class HaProgressButton extends LitElement {
       pointer-events: none;
     }
 
-    mwc-button[unelevated].success,
-    mwc-button[raised].success {
+    ha-button[unelevated].success,
+    ha-button[raised].success {
       --mdc-theme-primary: var(--success-color);
       --mdc-theme-on-primary: white;
     }
 
-    mwc-button.error {
+    ha-button.error {
       --mdc-theme-primary: white;
       background-color: var(--error-color);
       transition: none;
@@ -95,8 +99,8 @@ export class HaProgressButton extends LitElement {
       pointer-events: none;
     }
 
-    mwc-button[unelevated].error,
-    mwc-button[raised].error {
+    ha-button[unelevated].error,
+    ha-button[raised].error {
       --mdc-theme-primary: var(--error-color);
       --mdc-theme-on-primary: white;
     }
@@ -113,8 +117,8 @@ export class HaProgressButton extends LitElement {
       color: white;
     }
 
-    mwc-button.success slot,
-    mwc-button.error slot {
+    ha-button.success slot,
+    ha-button.error slot {
       visibility: hidden;
     }
     :host([destructive]) {