Consolidate all icon button logic into <ha-icon-button> + ensure tooltip (#9230)

gallery/src/ha-gallery.js

@@ -65,10 +65,11 @@ class HaGallery extends PolymerElement {
         <app-header slot="header" fixed>
           <app-toolbar>
             <ha-icon-button
-              icon="hass:arrow-left"
               on-click="_backTapped"
               class$="[[_computeHeaderButtonClass(_demo)]]"
-            ></ha-icon-button>
+            >
+              <ha-icon icon="hass:arrow-left"></ha-icon>
+            </ha-icon-button>
             <div main-title>
               [[_withDefault(_demo, "Home Assistant Gallery")]]
             </div>

hassio/src/addon-store/hassio-addon-store.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
@@ -18,7 +17,7 @@ import { navigate } from "../../../src/common/navigate";
 import "../../../src/common/search/search-input";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
-import "../../../src/components/ha-svg-icon";
+import "../../../src/components/ha-icon-button";
 import {
   HassioAddonInfo,
   HassioAddonRepository,
@@ -92,9 +91,11 @@ class HassioAddonStore extends LitElement {
           slot="toolbar-icon"
           @action=${this._handleAction}
         >
-          <mwc-icon-button slot="trigger" alt="menu">
+          <ha-icon-button
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+            .label=${this.supervisor.localize("common.menu")}
-          </mwc-icon-button>
+            .path=${mdiDotsVertical}
+            slot="trigger"
+          ></ha-icon-button>
           <mwc-list-item>
             ${this.supervisor.localize("store.repositories")}
           </mwc-list-item>
@@ -113,6 +114,7 @@ class HassioAddonStore extends LitElement {
           : html`
               <div class="search">
                 <search-input
+                  .hass=${this.hass}
                   no-label-float
                   no-underline
                   .filter=${this._filter}

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -15,12 +15,13 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-switch";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
@@ -100,9 +101,11 @@ class HassioAddonConfig extends LitElement {
           </h2>
           <div class="card-menu">
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
-              <mwc-icon-button slot="trigger">
+              <ha-icon-button
-                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+                .label=${this.hass.localize("common.menu")}
-              </mwc-icon-button>
+                .path=${mdiDotsVertical}
+                slot="trigger"
+              ></ha-icon-button>
               <mwc-list-item .disabled=${!this._canShowSchema}>
                 ${this._yamlMode
                   ? this.supervisor.localize(

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -365,9 +365,9 @@ class HassioAddonInfo extends LitElement {
                       <ha-label-badge
                         @click=${this._showMoreInfo}
                         id="docker_api"
-                        .label=".${this.supervisor.localize(
+                        .label=${this.supervisor.localize(
                           "addon.dashboard.capability.label.docker"
-                        )}"
+                        )}
                         description=""
                       >
                         <ha-svg-icon .path=${mdiDocker}></ha-svg-icon>

hassio/src/backups/hassio-backups.ts

@@ -23,7 +23,8 @@ import {
 } from "../../../src/components/data-table/ha-data-table";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-svg-icon";
 import {
   fetchHassioBackups,
   friendlyFolderName,
@@ -31,6 +32,7 @@ import {
   reloadHassioBackups,
   removeBackup,
 } from "../../../src/data/hassio/backup";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -40,9 +42,9 @@ import "../../../src/layouts/hass-tabs-subpage-data-table";
 import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
-import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup";
 import { showBackupUploadDialog } from "../dialogs/backup/show-dialog-backup-upload";
+import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup";
+import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
 import { supervisorTabs } from "../hassio-tabs";
 import { hassioStyle } from "../resources/hassio-style";
 
@@ -179,9 +181,11 @@ export class HassioBackups extends LitElement {
           slot="toolbar-icon"
           @action=${this._handleAction}
         >
-          <mwc-icon-button slot="trigger" alt="menu">
+          <ha-icon-button
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+            .label=${this.hass.localize("common.menu")}
-          </mwc-icon-button>
+            .path=${mdiDotsVertical}
+            slot="trigger"
+          ></ha-icon-button>
           <mwc-list-item>
             ${this.supervisor?.localize("common.reload")}
           </mwc-list-item>
@@ -216,13 +220,15 @@ export class HassioBackups extends LitElement {
                       </mwc-button>
                     `
                   : html`
-                      <mwc-icon-button
+                      <ha-icon-button
+                        .label=${this.supervisor.localize(
+                          "snapshot.delete_selected"
+                        )}
+                        .path=${mdiDelete}
                         id="delete-btn"
                         class="warning"
                         @click=${this._deleteSelected}
-                      >
+                      ></ha-icon-button>
-                        <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                      </mwc-icon-button>
                       <paper-tooltip animation-delay="0" for="delete-btn">
                         ${this.supervisor.localize("backup.delete_selected")}
                       </paper-tooltip>
@@ -368,7 +374,7 @@ export class HassioBackups extends LitElement {
           margin-right: -12px;
         }
         .header-btns > mwc-button,
-        .header-btns > mwc-icon-button {
+        .header-btns > ha-icon-button {
           margin: 8px;
         }
       `,

hassio/src/components/hassio-upload-backup.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiFolderUpload } from "@mdi/js";
 import "@polymer/paper-input/paper-input-container";
 import { html, LitElement, TemplateResult } from "lit";
@@ -6,9 +5,8 @@ import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-circular-progress";
 import "../../../src/components/ha-file-upload";
-import "../../../src/components/ha-svg-icon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { HassioBackup, uploadBackup } from "../../../src/data/hassio/backup";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../src/types";
 
@@ -31,6 +29,7 @@ export class HassioUploadBackup extends LitElement {
   public render(): TemplateResult {
     return html`
       <ha-file-upload
+        .hass=${this.hass}
         .uploading=${this._uploading}
         .icon=${mdiFolderUpload}
         accept="application/x-tar"

hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts

@@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-header-bar";
+import "../../../../src/components/ha-icon-button";
 import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -52,9 +53,12 @@ export class DialogHassioBackupUpload
         <div slot="heading">
           <ha-header-bar>
             <span slot="title"> Upload backup </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+            <ha-icon-button
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              .label=${this.hass.localize("common.close")}
-            </mwc-icon-button>
+              .path=${mdiClose}
+              slot="actionItems"
+              dialogAction="cancel"
+            ></ha-icon-button>
           </ha-header-bar>
         </div>
         <hassio-upload-backup

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -9,7 +9,7 @@ import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-header-bar";
-import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-icon-button";
 import { getSignedPath } from "../../../../src/data/auth";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
@@ -76,9 +76,12 @@ class HassioBackupDialog
         <div slot="heading">
           <ha-header-bar>
             <span slot="title">${this._backup.name}</span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+            <ha-icon-button
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              .label=${this.hass.localize("common.close")}
-            </mwc-icon-button>
+              .path=${mdiClose}
+              slot="actionItems"
+              dialogAction="cancel"
+            ></ha-icon-button>
           </ha-header-bar>
         </div>
         ${this._restoringBackup
@@ -110,9 +113,11 @@ class HassioBackupDialog
               @action=${this._handleMenuAction}
               @closed=${stopPropagation}
             >
-              <mwc-icon-button slot="trigger" alt="menu">
+              <ha-icon-button
-                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+                .label=${this.hass.localize("common.menu")}
-              </mwc-icon-button>
+                .path=${mdiDotsVertical}
+                slot="trigger"
+              ></ha-icon-button>
               <mwc-list-item>Download Backup</mwc-list-item>
               <mwc-list-item class="error">Delete Backup</mwc-list-item>
             </ha-button-menu>`
@@ -126,9 +131,6 @@ class HassioBackupDialog
       haStyle,
       haStyleDialog,
       css`
-        ha-svg-icon {
-          color: var(--primary-text-color);
-        }
         ha-circular-progress {
           display: block;
           text-align: center;

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -7,6 +7,7 @@ import "../../../../src/common/search/search-input";
 import { stringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
+import "../../../../src/components/ha-icon-button";
 import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
 import { dump } from "../../../../src/resources/js-yaml-dump";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
@@ -70,10 +71,13 @@ class HassioHardwareDialog extends LitElement {
           <h2>
             ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
           </h2>
-          <mwc-icon-button dialogAction="close">
+          <ha-icon-button
-            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            .label=${this.hass.localize("common.close")}
-          </mwc-icon-button>
+            .path=${mdiClose}
+            dialogAction="close"
+          ></ha-icon-button>
           <search-input
+            .hass=${this.hass}
             autofocus
             no-label-float
             .filter=${this._filter}
@@ -141,7 +145,7 @@ class HassioHardwareDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        mwc-icon-button {
+        ha-icon-button {
           position: absolute;
           right: 16px;
           top: 10px;

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-tab";
@@ -16,9 +15,9 @@ import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-header-bar";
+import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-radio";
 import "../../../../src/components/ha-related-items";
-import "../../../../src/components/ha-svg-icon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   AccessPoints,
@@ -104,9 +103,12 @@ export class DialogHassioNetwork
             <span slot="title">
               ${this.supervisor.localize("dialog.network.title")}
             </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+            <ha-icon-button
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              .label=${this.hass.localize("common.close")}
-            </mwc-icon-button>
+              .path=${mdiClose}
+              slot="actionItems"
+              dialogAction="cancel"
+            ></ha-icon-button>
           </ha-header-bar>
           ${this._interfaces.length > 1
             ? html`<mwc-tab-bar

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDelete } from "@mdi/js";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -7,7 +6,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-icon-button";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   addHassioDockerRegistry,
@@ -110,16 +109,15 @@ class HassioRegistriesDialog extends LitElement {
                             )}:
                             ${entry.username}</span
                           >
-                          <mwc-icon-button
+                          <ha-icon-button
                             .entry=${entry}
-                            .title=${this.supervisor.localize(
+                            .label=${this.supervisor.localize(
                               "dialog.registries.remove"
                             )}
+                            .path=${mdiDelete}
                             slot="meta"
                             @click=${this._removeRegistry}
-                          >
+                          ></ha-icon-button>
-                            <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                          </mwc-icon-button>
                         </mwc-list-item>
                       `
                     )
@@ -234,7 +232,7 @@ class HassioRegistriesDialog extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        mwc-icon-button {
+        ha-icon-button {
           color: var(--error-color);
           margin: -10px;
         }

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiDelete } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -13,7 +12,7 @@ import { caseInsensitiveStringCompare } from "../../../../src/common/string/comp
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-icon-button";
 import {
   fetchHassioAddonsInfo,
   HassioAddonRepository,
@@ -90,15 +89,14 @@ class HassioRepositoriesDialog extends LitElement {
                       <div secondary>${repo.maintainer}</div>
                       <div secondary>${repo.url}</div>
                     </paper-item-body>
-                    <mwc-icon-button
+                    <ha-icon-button
                       .slug=${repo.slug}
-                      .title=${this._dialogParams!.supervisor.localize(
+                      .label=${this._dialogParams!.supervisor.localize(
                         "dialog.repositories.remove"
                       )}
+                      .path=${mdiDelete}
                       @click=${this._removeRepository}
-                    >
+                    ></ha-icon-button>
-                      <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                    </mwc-icon-button>
                   </paper-item>
                 `
               )

hassio/src/dialogs/update/dialog-supervisor-update.ts

@@ -6,7 +6,6 @@ import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
 import {
   extractApiErrorMessage,

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -12,6 +12,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import { nextRender } from "../../../src/common/util/render-status";
+import "../../../src/components/ha-icon-button";
 import {
   fetchHassioAddonInfo,
   HassioAddonDetails,
@@ -72,12 +73,11 @@ class HassioIngressView extends LitElement {
 
     return html`${this.narrow || this.hass.dockedSidebar === "always_hidden"
       ? html`<div class="header">
-            <mwc-icon-button
+            <ha-icon-button
-              aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
+              .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
+              .path=${mdiMenu}
               @click=${this._toggleMenu}
-            >
+            ></ha-icon-button>
-              <ha-svg-icon .path=${mdiMenu}></ha-svg-icon>
-            </mwc-icon-button>
             <div class="main-title">${this._addon.name}</div>
           </div>
           ${iframe}`
@@ -241,7 +241,7 @@ class HassioIngressView extends LitElement {
         flex-grow: 1;
       }
 
-      mwc-icon-button {
+      ha-icon-button {
         pointer-events: auto;
       }
 

hassio/src/system/hassio-host-info.ts

@@ -9,6 +9,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-settings-row";
 import {
   extractApiErrorMessage,
@@ -181,9 +182,11 @@ class HassioHostInfo extends LitElement {
             : ""}
 
           <ha-button-menu corner="BOTTOM_START">
-            <mwc-icon-button slot="trigger">
+            <ha-icon-button
-              <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+              .label=${this.hass.localize("common.menu")}
-            </mwc-icon-button>
+              .path=${mdiDotsVertical}
+              slot="trigger"
+            ></ha-icon-button>
             <mwc-list-item
               .action=${"hardware"}
               @click=${this._handleMenuAction}

src/common/search/search-input.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiMagnify } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -11,11 +10,15 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import "../../components/ha-icon-button";
 import "../../components/ha-svg-icon";
+import { HomeAssistant } from "../../types";
 import { fireEvent } from "../dom/fire_event";
 
 @customElement("search-input")
 class SearchInput extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public filter?: string;
 
   @property({ type: Boolean, attribute: "no-label-float" })
@@ -50,13 +53,12 @@ class SearchInput extends LitElement {
         </slot>
         ${this.filter &&
         html`
-          <mwc-icon-button
+          <ha-icon-button
             slot="suffix"
             @click=${this._clearSearch}
-            title="Clear"
+            .label=${this.hass.localize("ui.common.clear")}
-          >
+            .path=${mdiClose}
-            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+          ></ha-icon-button>
-          </mwc-icon-button>
         `}
       </paper-input>
     `;
@@ -90,10 +92,10 @@ class SearchInput extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon,
-      mwc-icon-button {
+      ha-icon-button {
         color: var(--primary-text-color);
       }
-      mwc-icon-button {
+      ha-icon-button {
         --mdc-icon-button-size: 24px;
       }
       ha-svg-icon.prefix {

src/components/data-table/ha-data-table.ts

@@ -30,6 +30,7 @@ import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
 import { filterData, sortData } from "./sort-filter";
+import { HomeAssistant } from "../../types";
 
 declare global {
   // for fire event
@@ -93,6 +94,8 @@ export interface SortableColumnContainer {
 
 @customElement("ha-data-table")
 export class HaDataTable extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
 
   @property({ type: Array }) public data: DataTableRowData[] = [];
@@ -232,6 +235,7 @@ export class HaDataTable extends LitElement {
             ? html`
                 <div class="table-header">
                   <search-input
+                    .hass=${this.hass}
                     @value-changed=${this._handleSearchChange}
                     .label=${this.searchLabel}
                     .noLabelFloat=${this.noLabelFloat}

src/components/device/ha-area-devices-picker.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -37,6 +36,7 @@ import {
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
+import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./ha-devices-picker";
 
@@ -324,29 +324,25 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
         >
           <div class="suffix" slot="suffix">
             ${this.value
-              ? html`<mwc-icon-button
+              ? html`<ha-icon-button
                   class="clear-button"
                   .label=${this.hass.localize(
                     "ui.components.device-picker.clear"
                   )}
+                  .path=${mdiClose}
                   @click=${this._clearValue}
                   no-ripple
-                >
+                ></ha-icon-button> `
-                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                </mwc-icon-button> `
               : ""}
             ${areas.length > 0
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
                     .label=${this.hass.localize(
                       "ui.components.device-picker.show_devices"
                     )}
-                    class="toggle-button"
-                  >
-                    <ha-svg-icon
                     .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-                    ></ha-svg-icon>
+                    class="toggle-button"
-                  </mwc-icon-button>
+                  ></ha-icon-button>
                 `
               : ""}
           </div>
@@ -408,7 +404,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
       .suffix {
         display: flex;
       }
-      mwc-icon-button {
+      ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 0px 2px;
         color: var(--secondary-text-color);

src/components/device/ha-device-picker.ts

@@ -338,7 +338,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input > mwc-icon-button {
+      paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);

src/components/entity/ha-entity-attribute-picker.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -18,6 +17,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import { formatAttributeName } from "../../util/hass-attributes-util";
+import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
 
@@ -114,31 +114,27 @@ class HaEntityAttributePicker extends LitElement {
           <div class="suffix" slot="suffix">
             ${this.value
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
                     .label=${this.hass.localize(
                       "ui.components.entity.entity-picker.clear"
                     )}
+                    .path=${mdiClose}
                     class="clear-button"
                     tabindex="-1"
                     @click=${this._clearValue}
                     no-ripple
-                  >
+                  ></ha-icon-button>
-                    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                  </mwc-icon-button>
                 `
               : ""}
 
-            <mwc-icon-button
+            <ha-icon-button
               .label=${this.hass.localize(
                 "ui.components.entity.entity-attribute-picker.show_attributes"
               )}
+              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
               class="toggle-button"
               tabindex="-1"
-            >
+            ></ha-icon-button>
-              <ha-svg-icon
-                .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-              ></ha-svg-icon>
-            </mwc-icon-button>
           </div>
         </paper-input>
       </vaadin-combo-box-light>
@@ -178,7 +174,7 @@ class HaEntityAttributePicker extends LitElement {
       .suffix {
         display: flex;
       }
-      mwc-icon-button {
+      ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 0px 2px;
         color: var(--secondary-text-color);

src/components/entity/ha-entity-picker.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
@@ -21,6 +20,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
+import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
 
@@ -267,31 +267,27 @@ export class HaEntityPicker extends LitElement {
           <div class="suffix" slot="suffix">
             ${this.value && !this.hideClearIcon
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
                     .label=${this.hass.localize(
                       "ui.components.entity.entity-picker.clear"
                     )}
+                    .path=${mdiClose}
                     class="clear-button"
                     tabindex="-1"
                     @click=${this._clearValue}
                     no-ripple
-                  >
+                  ></ha-icon-button>
-                    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                  </mwc-icon-button>
                 `
               : ""}
 
-            <mwc-icon-button
+            <ha-icon-button
               .label=${this.hass.localize(
                 "ui.components.entity.entity-picker.show_entities"
               )}
+              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
               class="toggle-button"
               tabindex="-1"
-            >
+            ></ha-icon-button>
-              <ha-svg-icon
-                .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-              ></ha-svg-icon>
-            </mwc-icon-button>
           </div>
         </paper-input>
       </vaadin-combo-box-light>
@@ -340,7 +336,7 @@ export class HaEntityPicker extends LitElement {
       .suffix {
         display: flex;
       }
-      mwc-icon-button {
+      ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 0px 2px;
         color: var(--secondary-text-color);

src/components/entity/ha-entity-toggle.ts

@@ -1,3 +1,4 @@
+import { mdiFlash, mdiFlashOff } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -41,15 +42,15 @@ export class HaEntityToggle extends LitElement {
     if (this.stateObj.attributes.assumed_state) {
       return html`
         <ha-icon-button
-          aria-label=${`Turn ${computeStateName(this.stateObj)} off`}
+          .label=${`Turn ${computeStateName(this.stateObj)} off`}
-          icon="hass:flash-off"
+          .path=${mdiFlashOff}
           .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOff}
           ?state-active=${!this._isOn}
         ></ha-icon-button>
         <ha-icon-button
-          aria-label=${`Turn ${computeStateName(this.stateObj)} on`}
+          .label=${`Turn ${computeStateName(this.stateObj)} on`}
-          icon="hass:flash"
+          .path=${mdiFlash}
           .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOn}
           ?state-active=${this._isOn}

src/components/entity/ha-statistic-picker.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheck } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
@@ -289,7 +288,7 @@ export class HaStatisticPicker extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input > mwc-icon-button {
+      paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);

src/components/ha-alert.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import {
   mdiAlertCircleOutline,
   mdiAlertOutline,
@@ -11,6 +10,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
+import "./ha-icon-button";
 import "./ha-svg-icon";
 
 const ALERT_ICONS = {
@@ -66,12 +66,11 @@ class HaAlert extends LitElement {
                   .label=${this.actionText}
                 ></mwc-button>`
               : this.dismissable
-              ? html`<mwc-icon-button
+              ? html`<ha-icon-button
                   @click=${this._dismiss_clicked}
-                  aria-label="Dismiss alert"
+                  label="Dismiss alert"
-                >
+                  .path=${mdiClose}
-                  <ha-svg-icon .path=${mdiClose}> </ha-svg-icon>
+                ></ha-icon-button>`
-                </mwc-icon-button> `
               : ""}
           </div>
         </div>
@@ -140,7 +139,7 @@ class HaAlert extends LitElement {
     mwc-button {
       --mdc-theme-primary: var(--primary-text-color);
     }
-    mwc-icon-button {
+    ha-icon-button {
       --mdc-icon-button-size: 36px;
     }
     .issue-type.info > .icon {

src/components/ha-area-picker.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -42,6 +41,7 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
+import "./ha-icon-button";
 import "./ha-svg-icon";
 
 const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
@@ -362,28 +362,24 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         >
           ${this.value
             ? html`
-                <mwc-icon-button
+                <ha-icon-button
                   .label=${this.hass.localize(
                     "ui.components.area-picker.clear"
                   )}
+                  .path=${mdiClose}
                   slot="suffix"
                   class="clear-button"
                   @click=${this._clearValue}
-                >
+                ></ha-icon-button>
-                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                </mwc-icon-button>
               `
             : ""}
 
-          <mwc-icon-button
+          <ha-icon-button
             .label=${this.hass.localize("ui.components.area-picker.toggle")}
+            .path=${this._opened ? mdiMenuUp : mdiMenuDown}
             slot="suffix"
             class="toggle-button"
-          >
+          ></ha-icon-button>
-            <ha-svg-icon
-              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-            ></ha-svg-icon>
-          </mwc-icon-button>
         </paper-input>
       </vaadin-combo-box-light>
     `;
@@ -457,7 +453,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input > mwc-icon-button {
+      paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);

src/components/ha-button-related-filter-menu.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
 import type { Corner } from "@material/mwc-menu";
 import "@material/mwc-menu/mwc-menu-surface";
 import { mdiFilterVariant } from "@mdi/js";
@@ -12,7 +11,7 @@ import type { HomeAssistant } from "../types";
 import "./device/ha-device-picker";
 import "./entity/ha-entity-picker";
 import "./ha-area-picker";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 declare global {
   // for fire event
@@ -55,9 +54,10 @@ export class HaRelatedFilterButtonMenu extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-icon-button @click=${this._handleClick}>
+      <ha-icon-button
-        <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
+        @click=${this._handleClick}
-      </mwc-icon-button>
+        .path=${mdiFilterVariant}
+      ></ha-icon-button>
       <mwc-menu-surface
         .open=${this._open}
         .anchor=${this}

src/components/ha-button-toggle-group.ts

@@ -1,12 +1,10 @@
-import "@material/mwc-button/mwc-button";
+import { Button } from "@material/mwc-button/mwc-button";
-import type { Button } from "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, queryAll } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 @customElement("ha-button-toggle-group")
 export class HaButtonToggleGroup extends LitElement {
@@ -25,14 +23,13 @@ export class HaButtonToggleGroup extends LitElement {
       <div>
         ${this.buttons.map((button) =>
           button.iconPath
-            ? html`<mwc-icon-button
+            ? html`<ha-icon-button
                 .label=${button.label}
+                .path=${button.iconPath}
                 .value=${button.value}
                 ?active=${this.active === button.value}
                 @click=${this._handleClick}
-              >
+              ></ha-icon-button>`
-                <ha-svg-icon .path=${button.iconPath}></ha-svg-icon>
-              </mwc-icon-button>`
             : html`<mwc-button
                 style=${styleMap({
                   width: this.fullWidth
@@ -77,16 +74,16 @@ export class HaButtonToggleGroup extends LitElement {
         --mdc-shape-small: 0;
         --mdc-button-outline-width: 1px 0 1px 1px;
       }
-      mwc-icon-button {
+      ha-icon-button {
         border: 1px solid var(--primary-color);
         border-right-width: 0px;
       }
-      mwc-icon-button,
+      ha-icon-button,
       mwc-button {
         position: relative;
         cursor: pointer;
       }
-      mwc-icon-button::before,
+      ha-icon-button::before,
       mwc-button::before {
         top: 0;
         left: 0;
@@ -99,23 +96,23 @@ export class HaButtonToggleGroup extends LitElement {
         content: "";
         transition: opacity 15ms linear, background-color 15ms linear;
       }
-      mwc-icon-button[active]::before,
+      ha-icon-button[active]::before,
       mwc-button[active]::before {
         opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
       }
-      mwc-icon-button:first-child,
+      ha-icon-button:first-child,
       mwc-button:first-child {
         --mdc-shape-small: 4px 0 0 4px;
         border-radius: 4px 0 0 4px;
       }
-      mwc-icon-button:last-child,
+      ha-icon-button:last-child,
       mwc-button:last-child {
         border-radius: 0 4px 4px 0;
         border-right-width: 1px;
         --mdc-shape-small: 0 4px 4px 0;
         --mdc-button-outline-width: 1px;
       }
-      mwc-icon-button:only-child,
+      ha-icon-button:only-child,
       mwc-button:only-child {
         --mdc-shape-small: 4px;
         border-right-width: 1px;

src/components/ha-climate-control.js

@@ -3,6 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { EventsMixin } from "../mixins/events-mixin";
+import "./ha-icon";
 import "./ha-icon-button";
 
 /*
@@ -40,16 +41,14 @@ class HaClimateControl extends EventsMixin(PolymerElement) {
       <div id="target_temperature">[[value]] [[units]]</div>
       <div class="control-buttons">
         <div>
-          <ha-icon-button
+          <ha-icon-button on-click="incrementValue">
-            icon="hass:chevron-up"
+            <ha-icon icon="hass:chevron-up"></ha-icon>
-            on-click="incrementValue"
+          </ha-icon-button>
-          ></ha-icon-button>
         </div>
         <div>
-          <ha-icon-button
+          <ha-icon-button on-click="decrementValue">
-            icon="hass:chevron-down"
+            <ha-icon icon="hass:chevron-down"></ha-icon>
-            on-click="decrementValue"
+          </ha-icon-button>
-          ></ha-icon-button>
         </div>
       </div>
     `;

src/components/ha-combo-box.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -11,7 +10,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 // eslint-disable-next-line lit/prefer-static-styles
 const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
@@ -94,26 +93,22 @@ export class HaComboBox extends LitElement {
         >
           ${this.value
             ? html`
-                <mwc-icon-button
+                <ha-icon-button
                   .label=${this.hass.localize("ui.components.combo-box.clear")}
+                  .path=${mdiClose}
                   slot="suffix"
                   class="clear-button"
                   @click=${this._clearValue}
-                >
+                ></ha-icon-button>
-                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                </mwc-icon-button>
               `
             : ""}
 
-          <mwc-icon-button
+          <ha-icon-button
             .label=${this.hass.localize("ui.components.combo-box.show")}
+            .path=${this._opened ? mdiMenuUp : mdiMenuDown}
             slot="suffix"
             class="toggle-button"
-          >
+          ></ha-icon-button>
-            <ha-svg-icon
-              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-            ></ha-svg-icon>
-          </mwc-icon-button>
         </paper-input>
       </vaadin-combo-box-light>
     `;
@@ -146,7 +141,7 @@ export class HaComboBox extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input > mwc-icon-button {
+      paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);

src/components/ha-cover-controls.ts

@@ -1,3 +1,4 @@
+import { mdiStop } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -13,6 +14,7 @@ import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
 import { UNAVAILABLE } from "../data/entity";
 import type { HomeAssistant } from "../types";
 import CoverEntity from "../util/cover-model";
+import "./ha-icon";
 import "./ha-icon-button";
 
 @customElement("ha-cover-controls")
@@ -45,10 +47,11 @@ class HaCoverControls extends LitElement {
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.open_cover"
           )}
-          .icon=${computeOpenIcon(this.stateObj)}
           @click=${this._onOpenTap}
           .disabled=${this._computeOpenDisabled()}
-        ></ha-icon-button>
+        >
+          <ha-icon .icon=${computeOpenIcon(this.stateObj)}></ha-icon>
+        </ha-icon-button>
         <ha-icon-button
           class=${classMap({
             hidden: !this._entityObj.supportsStop,
@@ -56,7 +59,7 @@ class HaCoverControls extends LitElement {
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.stop_cover"
           )}
-          icon="hass:stop"
+          .path=${mdiStop}
           @click=${this._onStopTap}
           .disabled=${this.stateObj.state === UNAVAILABLE}
         ></ha-icon-button>
@@ -67,10 +70,11 @@ class HaCoverControls extends LitElement {
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.close_cover"
           )}
-          .icon=${computeCloseIcon(this.stateObj)}
           @click=${this._onCloseTap}
           .disabled=${this._computeClosedDisabled()}
-        ></ha-icon-button>
+        >
+          <ha-icon .icon=${computeCloseIcon(this.stateObj)}></ha-icon>
+        </ha-icon-button>
       </div>
     `;
   }

src/components/ha-cover-tilt-controls.ts

@@ -1,3 +1,4 @@
+import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
@@ -39,10 +40,10 @@ class HaCoverTiltControls extends LitElement {
         class=${classMap({
           invisible: !this._entityObj.supportsOpenTilt,
         })}
-        label=${this.hass.localize(
+        .label=${this.hass.localize(
           "ui.dialogs.more_info_control.open_tilt_cover"
         )}
-        icon="hass:arrow-top-right"
+        .path=${mdiArrowTopRight}
         @click=${this._onOpenTiltTap}
         .disabled=${this._computeOpenDisabled()}
       ></ha-icon-button>
@@ -50,8 +51,8 @@ class HaCoverTiltControls extends LitElement {
         class=${classMap({
           invisible: !this._entityObj.supportsStopTilt,
         })}
-        label=${this.hass.localize("ui.dialogs.more_info_control.stop_cover")}
+        .label=${this.hass.localize("ui.dialogs.more_info_control.stop_cover")}
-        icon="hass:stop"
+        .path=${mdiStop}
         @click=${this._onStopTiltTap}
         .disabled=${this.stateObj.state === UNAVAILABLE}
       ></ha-icon-button>
@@ -59,10 +60,10 @@ class HaCoverTiltControls extends LitElement {
         class=${classMap({
           invisible: !this._entityObj.supportsCloseTilt,
         })}
-        label=${this.hass.localize(
+        .label=${this.hass.localize(
           "ui.dialogs.more_info_control.close_tilt_cover"
         )}
-        icon="hass:arrow-bottom-left"
+        .path=${mdiArrowBottomLeft}
         @click=${this._onCloseTiltTap}
         .disabled=${this._computeClosedDisabled()}
       ></ha-icon-button>`;

src/components/ha-dialog.ts

@@ -4,22 +4,20 @@ import { css, CSSResultGroup, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
-import "@material/mwc-icon-button/mwc-icon-button";
+import "./ha-icon-button";
-import "./ha-svg-icon";
 
 export const createCloseHeading = (
   hass: HomeAssistant,
   title: string | TemplateResult
 ) => html`
   <span class="header_title">${title}</span>
-  <mwc-icon-button
+  <ha-icon-button
-    aria-label=${hass.localize("ui.dialogs.generic.close")}
+    .label=${hass.localize("ui.dialogs.generic.close")}
+    .path=${mdiClose}
     dialogAction="close"
     class="header_button"
     dir=${computeRTLDirection(hass)}
-  >
+  ></ha-icon-button>
-    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-  </mwc-icon-button>
 `;
 
 @customElement("ha-dialog")

src/components/ha-file-upload.ts

@@ -1,13 +1,13 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose } from "@mdi/js";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
+import { HomeAssistant } from "../types";
 import "./ha-circular-progress";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 declare global {
   interface HASSDomEvents {
@@ -17,6 +17,8 @@ declare global {
 
 @customElement("ha-file-upload")
 export class HaFileUpload extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public accept!: string;
 
   @property() public icon!: string;
@@ -82,15 +84,15 @@ export class HaFileUpload extends LitElement {
                   ${this.value}
                 </iron-input>
                 ${this.value
-                  ? html`<mwc-icon-button
+                  ? html`<ha-icon-button
                       slot="suffix"
                       @click=${this._clearValue}
-                    >
+                      .label=${this.hass.localize("ui.common.close")}
-                      <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                      .path=${mdiClose}
-                    </mwc-icon-button>`
+                    ></ha-icon-button>`
-                  : html`<mwc-icon-button slot="suffix">
+                  : html`<ha-icon-button slot="suffix">
-                      <ha-svg-icon .path=${this.icon}></ha-svg-icon>
+                      .path=${this.icon} ></ha-icon-button
-                    </mwc-icon-button>`}
+                    >`}
               </paper-input-container>
             </label>
           `}
@@ -154,7 +156,7 @@ export class HaFileUpload extends LitElement {
         max-width: 125px;
         max-height: 125px;
       }
-      mwc-icon-button {
+      ha-icon-button {
         --mdc-icon-button-size: 24px;
         --mdc-icon-size: 20px;
       }

src/components/ha-form/ha-form-select.ts

@@ -4,7 +4,6 @@ import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-svg-icon";
 import "../ha-radio";
 import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./types";
 

src/components/ha-form/ha-form-string.ts

@@ -11,7 +11,7 @@ import {
 } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-svg-icon";
+import "../ha-icon-button";
 import type {
   HaFormElement,
   HaFormStringData,
@@ -64,17 +64,13 @@ export class HaFormString extends LitElement implements HaFormElement {
         @input=${this._valueChanged}
       ></mwc-textfield>
       ${isPassword
-        ? html`
+        ? html`<ha-icon-button
-            <mwc-icon-button
             toggles
-              title="Click to toggle between masked and clear password"
+            .label="Click to toggle between masked and clear password"
             @click=${this._toggleUnmaskedPassword}
             tabindex="-1"
-              ><ha-svg-icon
             .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
-              ></ha-svg-icon>
+          ></ha-icon-button>`
-            </mwc-icon-button>
-          `
         : ""}
     `;
   }
@@ -126,7 +122,7 @@ export class HaFormString extends LitElement implements HaFormElement {
       mwc-textfield {
         display: block;
       }
-      mwc-icon-button {
+      ha-icon-button {
         position: absolute;
         top: 1em;
         right: 12px;

src/components/ha-icon-button-arrow-next.ts

@@ -1,9 +1,8 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../types";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 @customElement("ha-icon-button-arrow-next")
 export class HaIconButtonArrowNext extends LitElement {
@@ -28,12 +27,13 @@ export class HaIconButtonArrowNext extends LitElement {
   }
 
   protected render(): TemplateResult {
-    return html`<mwc-icon-button
+    return html`
+      <ha-icon-button
         .disabled=${this.disabled}
         .label=${this.label || this.hass?.localize("ui.common.next") || "Next"}
-    >
+        .path=${this._icon}
-      <ha-svg-icon .path=${this._icon}></ha-svg-icon>
+      ></ha-icon-button>
-    </mwc-icon-button> `;
+    `;
   }
 }
 

src/components/ha-icon-button-arrow-prev.ts

@@ -1,9 +1,8 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../types";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 @customElement("ha-icon-button-arrow-prev")
 export class HaIconButtonArrowPrev extends LitElement {
@@ -29,12 +28,11 @@ export class HaIconButtonArrowPrev extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-icon-button
+      <ha-icon-button
         .disabled=${this.disabled}
         .label=${this.label || this.hass?.localize("ui.common.back") || "Back"}
-      >
+        .path=${this._icon}
-        <ha-svg-icon .path=${this._icon}></ha-svg-icon>
+      ></ha-icon-button>
-      </mwc-icon-button>
     `;
   }
 }

src/components/ha-icon-button-next.ts

@@ -1,9 +1,8 @@
-import "@material/mwc-icon-button";
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../types";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 @customElement("ha-icon-button-next")
 export class HaIconButtonNext extends LitElement {
@@ -29,12 +28,11 @@ export class HaIconButtonNext extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-icon-button
+      <ha-icon-button
         .disabled=${this.disabled}
         .label=${this.label || this.hass?.localize("ui.common.next") || "Next"}
-      >
+        .path=${this._icon}
-        <ha-svg-icon .path=${this._icon}></ha-svg-icon>
+      ></ha-icon-button>
-      </mwc-icon-button>
     `;
   }
 }

src/components/ha-icon-button-prev.ts

@@ -1,9 +1,8 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../types";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 @customElement("ha-icon-button-prev")
 export class HaIconButtonPrev extends LitElement {
@@ -29,12 +28,11 @@ export class HaIconButtonPrev extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-icon-button
+      <ha-icon-button
         .disabled=${this.disabled}
         .label=${this.label || this.hass?.localize("ui.common.back") || "Back"}
-      >
+        .path=${this._icon}
-        <ha-svg-icon .path=${this._icon}></ha-svg-icon>
+      ></ha-icon-button>
-      </mwc-icon-button>
     `;
   }
 }

src/components/ha-icon-button.ts

@@ -1,25 +1,35 @@
 import "@material/mwc-icon-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import "./ha-icon";
+import "./ha-svg-icon";
 
 @customElement("ha-icon-button")
 export class HaIconButton extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  @property({ type: String }) icon = "";
+  // SVG icon path (if you need a non SVG icon instead, use the provided slot to pass an <ha-icon> in)
+  @property({ type: String }) path?: string;
 
+  // Label that is used for ARIA support and as tooltip
   @property({ type: String }) label = "";
 
+  @property({ type: Boolean }) hideTitle = false;
+
   static shadowRootOptions: ShadowRootInit = {
     mode: "open",
     delegatesFocus: true,
   };
 
   protected render(): TemplateResult {
+    // Note: `ariaLabel` required despite the `mwc-icon-button` docs saying `label` should be enough
     return html`
-      <mwc-icon-button .label=${this.label} .disabled=${this.disabled}>
+      <mwc-icon-button
-        <ha-icon .icon=${this.icon}></ha-icon>
+        .ariaLabel=${this.label}
+        .title=${this.hideTitle ? "" : this.label}
+        .disabled=${this.disabled}
+      >
+        ${this.path ? html`<ha-svg-icon .path=${this.path}></ha-svg-icon>` : ""}
+        <slot></slot>
       </mwc-icon-button>
     `;
   }

src/components/ha-menu-button.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
 import { mdiMenu } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -7,7 +6,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import { subscribeNotifications } from "../data/persistent_notification";
 import { HomeAssistant } from "../types";
-import "./ha-svg-icon";
+import "./ha-icon-button";
 
 @customElement("ha-menu-button")
 class HaMenuButton extends LitElement {
@@ -50,12 +49,11 @@ class HaMenuButton extends LitElement {
           (entityId) => computeDomain(entityId) === "configurator"
         ));
     return html`
-      <mwc-icon-button
+      <ha-icon-button
-        aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
+        .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
+        .path=${mdiMenu}
         @click=${this._toggleMenu}
-      >
+      ></ha-icon-button>
-        <ha-svg-icon .path=${mdiMenu}></ha-svg-icon>
-      </mwc-icon-button>
       ${hasNotifications ? html` <div class="dot"></div> ` : ""}
     `;
   }

src/components/ha-picture-upload.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiImagePlus } from "@mdi/js";
 import "@polymer/paper-input/paper-input-container";
 import { html, LitElement, TemplateResult } from "lit";
@@ -13,7 +12,6 @@ import {
 import { HomeAssistant } from "../types";
 import "./ha-circular-progress";
 import "./ha-file-upload";
-import "./ha-svg-icon";
 
 @customElement("ha-picture-upload")
 export class HaPictureUpload extends LitElement {
@@ -34,6 +32,7 @@ export class HaPictureUpload extends LitElement {
   public render(): TemplateResult {
     return html`
       <ha-file-upload
+        .hass=${this.hass}
         .icon=${mdiImagePlus}
         .label=${this.label ||
         this.hass.localize("ui.components.picture-upload.label")}

src/components/ha-service-control.ts

@@ -18,6 +18,7 @@ import { Selector } from "../data/selector";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-checkbox";
+import "./ha-icon-button";
 import "./ha-selector/ha-selector";
 import "./ha-service-picker";
 import "./ha-settings-row";
@@ -204,12 +205,10 @@ export class HaServiceControl extends LitElement {
               target="_blank"
               rel="noreferrer"
             >
-              <mwc-icon-button>
+              <ha-icon-button
-                <ha-svg-icon
+                .path=${mdiHelpCircle}
-                  path=${mdiHelpCircle}
                 class="help-icon"
-                ></ha-svg-icon>
+              ></ha-icon-button>
-              </mwc-icon-button>
             </a>`
           : ""}
       </div>

src/components/ha-sidebar.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button";
 import {
   mdiBell,
   mdiCellphoneCog,
@@ -44,6 +43,7 @@ import { actionHandler } from "../panels/lovelace/common/directives/action-handl
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../types";
 import "./ha-icon";
+import "./ha-icon-button";
 import "./ha-menu-button";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
@@ -302,16 +302,13 @@ class HaSidebar extends LitElement {
     >
       ${!this.narrow
         ? html`
-            <mwc-icon-button
+            <ha-icon-button
               .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
-              @action=${this._toggleSidebar}
-            >
-              <ha-svg-icon
               .path=${this.hass.dockedSidebar === "docked"
                 ? mdiMenuOpen
                 : mdiMenu}
-              ></ha-svg-icon>
+              @action=${this._toggleSidebar}
-            </mwc-icon-button>
+            ></ha-icon-button>
           `
         : ""}
       ${this.editMode
@@ -386,9 +383,11 @@ class HaSidebar extends LitElement {
                 : this.hass.localize(`panel.${panel.title}`) ||
                   panel.title}</span
             >
-            <mwc-icon-button class="show-panel">
+            <ha-icon-button
-              <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
+              .label=${this.hass.localize("ui.sidebar.show_panel")}
-            </mwc-icon-button>
+              .path=${mdiPlus}
+              class="show-panel"
+            ></ha-icon-button>
           </paper-icon-item>`;
         })}
         ${this._renderSpacer()}`
@@ -723,13 +722,13 @@ class HaSidebar extends LitElement {
           <span class="item-text">${title}</span>
         </paper-icon-item>
         ${this.editMode
-          ? html`<mwc-icon-button
+          ? html`<ha-icon-button
+              .label=${this.hass.localize("ui.sidebar.hide_panel")}
+              .path=${mdiClose}
               class="hide-panel"
               .panel=${urlPath}
               @click=${this._hidePanel}
-            >
+            ></ha-icon-button>`
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            </mwc-icon-button>`
           : ""}
       </a>
     `;
@@ -786,7 +785,7 @@ class HaSidebar extends LitElement {
         :host([rtl][expanded]) .menu {
           width: calc(256px + env(safe-area-inset-right));
         }
-        .menu mwc-icon-button {
+        .menu ha-icon-button {
           color: var(--sidebar-icon-color);
         }
         .title {
@@ -1021,7 +1020,7 @@ class HaSidebar extends LitElement {
           font-weight: 500;
         }
 
-        :host([rtl]) .menu mwc-icon-button {
+        :host([rtl]) .menu ha-icon-button {
           -webkit-transform: scaleX(-1);
           transform: scaleX(-1);
         }

src/components/ha-target-picker.ts

@@ -1,7 +1,6 @@
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import {
   mdiClose,
   mdiDevices,
@@ -15,7 +14,7 @@ import {
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, unsafeCSS } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { ensureArray } from "../common/ensure-array";
@@ -43,6 +42,7 @@ import "./entity/ha-entity-picker";
 import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
 import "./ha-area-picker";
 import "./ha-icon";
+import "./ha-icon-button";
 import "./ha-svg-icon";
 
 @customElement("ha-target-picker")
@@ -259,17 +259,19 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         ${type === "entity_id"
           ? ""
           : html` <span role="gridcell">
-              <mwc-icon-button
+              <ha-icon-button
                 class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
                 tabindex="-1"
                 role="button"
-                .label=${"Expand"}
+                .label=${this.hass.localize(
+                  "ui.components.target-picker.expand"
+                )}
+                .path=${mdiUnfoldMoreVertical}
+                hideTooltip
                 .id=${id}
                 .type=${type}
                 @click=${this._handleExpand}
-              >
+              ></ha-icon-button>
-                <ha-svg-icon .path=${mdiUnfoldMoreVertical}></ha-svg-icon>
-              </mwc-icon-button>
               <paper-tooltip class="expand" animation-delay="0"
                 >${this.hass.localize(
                   `ui.components.target-picker.expand_${type}`
@@ -277,17 +279,17 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
               >
             </span>`}
         <span role="gridcell">
-          <mwc-icon-button
+          <ha-icon-button
             class="mdc-chip__icon mdc-chip__icon--trailing"
             tabindex="-1"
             role="button"
-            .label=${"Remove"}
+            .label=${this.hass.localize("ui.components.target-picker.expand")}
+            .path=${mdiClose}
+            hideTooltip
             .id=${id}
             .type=${type}
             @click=${this._handleRemove}
-          >
+          ></ha-icon-button>
-            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-          </mwc-icon-button>
           <paper-tooltip animation-delay="0"
             >${this.hass.localize(
               `ui.components.target-picker.remove_${type}`
@@ -543,13 +545,13 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       .mdc-chip:not(.add) {
         cursor: default;
       }
-      .mdc-chip mwc-icon-button {
+      .mdc-chip ha-icon-button {
         --mdc-icon-button-size: 24px;
         display: flex;
         align-items: center;
         outline: none;
       }
-      .mdc-chip mwc-icon-button ha-svg-icon {
+      .mdc-chip ha-icon-button ha-svg-icon {
         border-radius: 50%;
         background: var(--secondary-text-color);
       }

src/components/ha-water_heater-control.js

@@ -3,6 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { EventsMixin } from "../mixins/events-mixin";
+import "./ha-icon";
 import "./ha-icon-button";
 
 /*
@@ -40,16 +41,14 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
       <div id="target_temperature">[[value]] [[units]]</div>
       <div class="control-buttons">
         <div>
-          <ha-icon-button
+          <ha-icon-button on-click="incrementValue">
-            icon="hass:chevron-up"
+            <ha-icon icon="hass:chevron-up"></ha-icon>
-            on-click="incrementValue"
+          </ha-icon-button>
-          ></ha-icon-button>
         </div>
         <div>
-          <ha-icon-button
+          <ha-icon-button on-click="decrementValue">
-            icon="hass:chevron-down"
+            <ha-icon icon="hass:chevron-down"></ha-icon>
-            on-click="decrementValue"
+          </ha-icon-button>
-          ></ha-icon-button>
         </div>
       </div>
     `;

src/components/media-player/ha-media-player-browse.ts

@@ -15,10 +15,10 @@ import {
 } from "lit";
 import {
   customElement,
-  property,
-  state,
-  query,
   eventOptions,
+  property,
+  query,
+  state,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
@@ -45,6 +45,7 @@ import "../ha-button-menu";
 import "../ha-card";
 import "../ha-circular-progress";
 import "../ha-fab";
+import "../ha-icon-button";
 import "../ha-svg-icon";
 
 declare global {
@@ -225,14 +226,13 @@ export class HaMediaPlayerBrowse extends LitElement {
         </div>
         ${this.dialog
           ? html`
-              <mwc-icon-button
+              <ha-icon-button
-                aria-label=${this.hass.localize("ui.dialogs.generic.close")}
+                .label=${this.hass.localize("ui.dialogs.generic.close")}
+                .path=${mdiClose}
                 @click=${this._closeDialogAction}
                 class="header_button"
                 dir=${computeRTLDirection(this.hass)}
-              >
+              ></ha-icon-button>
-                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-              </mwc-icon-button>
             `
           : ""}
       </div>
@@ -281,7 +281,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                           </ha-card>
                           ${child.can_play
                             ? html`
-                                <mwc-icon-button
+                                <ha-icon-button
                                   class="play ${classMap({
                                     can_expand: child.can_expand,
                                   })}"
@@ -289,14 +289,11 @@ export class HaMediaPlayerBrowse extends LitElement {
                                   .label=${this.hass.localize(
                                     `ui.components.media-browser.${this.action}-media`
                                   )}
-                                  @click=${this._actionClicked}
-                                >
-                                  <ha-svg-icon
                                   .path=${this.action === "play"
                                     ? mdiPlay
                                     : mdiPlus}
-                                  ></ha-svg-icon>
+                                  @click=${this._actionClicked}
-                                </mwc-icon-button>
+                                ></ha-icon-button>
                               `
                             : ""}
                         </div>
@@ -339,7 +336,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                           )}
                           slot="graphic"
                         >
-                          <mwc-icon-button
+                          <ha-icon-button
                             class="play ${classMap({
                               show:
                                 !mediaClass.show_list_images ||
@@ -349,14 +346,9 @@ export class HaMediaPlayerBrowse extends LitElement {
                             .label=${this.hass.localize(
                               `ui.components.media-browser.${this.action}-media`
                             )}
+                            .path=${this.action === "play" ? mdiPlay : mdiPlus}
                             @click=${this._actionClicked}
-                          >
+                          ></ha-icon-button>
-                            <ha-svg-icon
-                              .path=${this.action === "play"
-                                ? mdiPlay
-                                : mdiPlus}
-                            ></ha-svg-icon>
-                          </mwc-icon-button>
                         </div>
                         <span class="title">${child.title}</span>
                       </mwc-list-item>
@@ -952,7 +944,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           -webkit-line-clamp: 1;
         }
 
-        :host(:not([narrow])[scroll]) .header:not(.no-img) mwc-icon-button {
+        :host(:not([narrow])[scroll]) .header:not(.no-img) ha-icon-button {
           align-self: center;
         }
 

src/components/trace/hat-script-graph.ts

@@ -1,11 +1,10 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import {
   mdiAbTesting,
   mdiArrowUp,
   mdiAsterisk,
   mdiCallSplit,
   mdiCheckboxBlankOutline,
-  mdiCheckboxOutline,
+  mdiCheckboxMarkedOutline,
   mdiChevronDown,
   mdiChevronRight,
   mdiChevronUp,
@@ -39,11 +38,11 @@ import {
   ConditionTraceStep,
   TraceExtended,
 } from "../../data/trace";
-import "../ha-svg-icon";
+import "../ha-icon-button";
+import "./hat-graph-branch";
+import { BRANCH_HEIGHT, NODE_SIZE, SPACING } from "./hat-graph-const";
 import "./hat-graph-node";
 import "./hat-graph-spacer";
-import "./hat-graph-branch";
-import { NODE_SIZE, SPACING, BRANCH_HEIGHT } from "./hat-graph-const";
 
 export interface NodeInfo {
   path: string;
@@ -167,7 +166,7 @@ export class HatScriptGraph extends LitElement {
                 <div class="graph-container" ?track=${track_this}>
                   <hat-graph-node
                     .iconPath=${!trace || track_this
-                      ? mdiCheckboxOutline
+                      ? mdiCheckboxMarkedOutline
                       : mdiCheckboxBlankOutline}
                     @focus=${this.selectNode(config, branch_path)}
                     ?track=${track_this}
@@ -438,19 +437,17 @@ export class HatScriptGraph extends LitElement {
             : ""}
         </div>
         <div class="actions">
-          <mwc-icon-button
+          <ha-icon-button
             .disabled=${paths.length === 0 || paths[0] === this.selected}
             @click=${this._previousTrackedNode}
-          >
+            .path=${mdiChevronUp}
-            <ha-svg-icon .path=${mdiChevronUp}></ha-svg-icon>
+          ></ha-icon-button>
-          </mwc-icon-button>
+          <ha-icon-button
-          <mwc-icon-button
             .disabled=${paths.length === 0 ||
             paths[paths.length - 1] === this.selected}
             @click=${this._nextTrackedNode}
-          >
+            .path=${mdiChevronDown}
-            <ha-svg-icon .path=${mdiChevronDown}></ha-svg-icon>
+          ></ha-icon-button>
-          </mwc-icon-button>
         </div>
       `;
     } catch (err: any) {

src/components/user/ha-users-picker.ts

@@ -7,6 +7,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { fetchUsers, User } from "../../data/user";
 import type { PolymerChangedEvent } from "../../polymer-types";
 import type { HomeAssistant } from "../../types";
+import "../ha-icon-button";
 import "./ha-user-picker";
 
 @customElement("ha-users-picker")
@@ -46,7 +47,7 @@ class HaUsersPickerLight extends LitElement {
             <div>
               <ha-user-picker
                 .label=${this.pickedUserLabel}
-                .noUserLabel=${this.hass?.localize(
+                .noUserLabel=${this.hass!.localize(
                   "ui.components.user-picker.remove_user"
                 )}
                 .index=${idx}
@@ -59,16 +60,23 @@ class HaUsersPickerLight extends LitElement {
                 )}
                 @value-changed=${this._userChanged}
               ></ha-user-picker>
-              <mwc-icon-button .userId=${user_id} @click=${this._removeUser}>
+              <ha-icon-button
-                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                .userId=${user_id}
-              </mwc-icon-button>
+                .label=${this.hass!.localize(
+                  "ui.components.user-picker.remove_user"
+                )}
+                .path=${mdiClose}
+                @click=${this._removeUser}
+              >
+                ></ha-icon-button
+              >
             </div>
           `
         )
       )}
       <ha-user-picker
         .noUserLabel=${this.pickUserLabel ||
-        this.hass?.localize("ui.components.user-picker.add_user")}
+        this.hass!.localize("ui.components.user-picker.add_user")}
         .hass=${this.hass}
         .users=${notSelectedUsers}
         .disabled=${!notSelectedUsers?.length}

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiClose } from "@mdi/js";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
@@ -232,10 +233,10 @@ class DataEntryFlowDialog extends LitElement {
               ""
             : html`
                 <ha-icon-button
-                  aria-label=${this.hass.localize(
+                  .label=${this.hass.localize(
                     "ui.panel.config.integrations.config_flow.dismiss"
                   )}
-                  icon="hass:close"
+                  .path=${mdiClose}
                   dialogAction="close"
                   ?rtl=${computeRTL(this.hass)}
                 ></ha-icon-button>

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -75,6 +75,7 @@ class StepFlowPickHandler extends LitElement {
     return html`
       <h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>
       <search-input
+        .hass=${this.hass}
         autofocus
         .filter=${this._filter}
         @value-changed=${this._filterChanged}

src/dialogs/more-info/controls/more-info-fan.js

@@ -7,6 +7,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { attributeClassNames } from "../../../common/entity/attribute_class_names";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
+import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-labeled-slider";
 import "../../../components/ha-paper-dropdown-menu";
@@ -97,17 +98,19 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
           <div class="direction">
             <div>[[localize('ui.card.fan.direction')]]</div>
             <ha-icon-button
-              icon="hass:rotate-left"
               on-click="onDirectionReverse"
               title="[[localize('ui.card.fan.reverse')]]"
               disabled="[[computeIsRotatingReverse(stateObj)]]"
-            ></ha-icon-button>
+            >
+              <ha-icon icon="hass:rotate-left"></ha-icon>
+            </ha-icon-button>
             <ha-icon-button
-              icon="hass:rotate-right"
               on-click="onDirectionForward"
               title="[[localize('ui.card.fan.forward')]]"
               disabled="[[computeIsRotatingForward(stateObj)]]"
-            ></ha-icon-button>
+            >
+              <ha-icon icon="hass:rotate-right"></ha-icon>
+            </ha-icon-button>
           </div>
         </div>
       </div>

src/dialogs/more-info/controls/more-info-light.ts

@@ -1,3 +1,4 @@
+import { mdiPalette } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
@@ -142,7 +143,7 @@ class MoreInfoLight extends LitElement {
                       >
                       </ha-color-picker>
                       <ha-icon-button
-                        icon="hass:palette"
+                        .path=${mdiPalette}
                         @click=${this._segmentClick}
                         class="segmentationButton"
                       ></ha-icon-button>

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -1,6 +1,12 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button";
+import {
-import { mdiPlayBoxMultiple } from "@mdi/js";
+  mdiPlayBoxMultiple,
+  mdiSend,
+  mdiVolumeHigh,
+  mdiVolumeMinus,
+  mdiVolumeOff,
+  mdiVolumePlus,
+} from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
@@ -13,7 +19,6 @@ import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-paper-dropdown-menu";
 import "../../../components/ha-slider";
-import "../../../components/ha-svg-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
 import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
 import {
@@ -56,21 +61,22 @@ class MoreInfoMediaPlayer extends LitElement {
                   (control) => html`
                     <ha-icon-button
                       action=${control.action}
-                      .icon=${control.icon}
                       @click=${this._handleClick}
-                    ></ha-icon-button>
+                    >
+                      <ha-icon .icon=${control.icon}></ha-icon>
+                    </ha-icon-button>
                   `
                 )}
               </div>
               ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
                 ? html`
-                    <mwc-icon-button
+                    <ha-icon-button
-                      .title=${this.hass.localize(
+                      .label=${this.hass.localize(
                         "ui.card.media_player.browse_media"
                       )}
+                      .path=${mdiPlayBoxMultiple}
                       @click=${this._showBrowseMedia}
-                      ><ha-svg-icon .path=${mdiPlayBoxMultiple}></ha-svg-icon
+                    ></ha-icon-button>
-                    ></mwc-icon-button>
                   `
                 : ""}
             </div>
@@ -83,9 +89,9 @@ class MoreInfoMediaPlayer extends LitElement {
               ${supportsFeature(stateObj, SUPPORT_VOLUME_MUTE)
                 ? html`
                     <ha-icon-button
-                      .icon=${stateObj.attributes.is_volume_muted
+                      .path=${stateObj.attributes.is_volume_muted
-                        ? "hass:volume-off"
+                        ? mdiVolumeOff
-                        : "hass:volume-high"}
+                        : mdiVolumeHigh}
                       @click=${this._toggleMute}
                     ></ha-icon-button>
                   `
@@ -94,12 +100,12 @@ class MoreInfoMediaPlayer extends LitElement {
                 ? html`
                     <ha-icon-button
                       action="volume_down"
-                      icon="hass:volume-minus"
+                      .path=${mdiVolumeMinus}
                       @click=${this._handleClick}
                     ></ha-icon-button>
                     <ha-icon-button
                       action="volume_up"
-                      icon="hass:volume-plus"
+                      .path=${mdiVolumePlus}
                       @click=${this._handleClick}
                     ></ha-icon-button>
                   `
@@ -184,7 +190,7 @@ class MoreInfoMediaPlayer extends LitElement {
                 @keydown=${this._ttsCheckForEnter}
               ></paper-input>
               <ha-icon-button
-                icon="hass:send"
+                .path=${mdiSend}
                 .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 @click=${this._sendTTS}
               ></ha-icon-button>

src/dialogs/more-info/controls/more-info-vacuum.ts

@@ -1,3 +1,12 @@
+import {
+  mdiHomeMapMarker,
+  mdiMapMarker,
+  mdiPause,
+  mdiPlay,
+  mdiPlayPause,
+  mdiStop,
+  mdiTargetVariant,
+} from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -32,13 +41,13 @@ interface VacuumCommand {
 const VACUUM_COMMANDS: VacuumCommand[] = [
   {
     translationKey: "start",
-    icon: "hass:play",
+    icon: mdiPlay,
     serviceName: "start",
     isVisible: (stateObj) => supportsFeature(stateObj, VACUUM_SUPPORT_START),
   },
   {
     translationKey: "pause",
-    icon: "hass:pause",
+    icon: mdiPause,
     serviceName: "pause",
     isVisible: (stateObj) =>
       // We need also to check if Start is supported because if not we show play-pause
@@ -47,7 +56,7 @@ const VACUUM_COMMANDS: VacuumCommand[] = [
   },
   {
     translationKey: "start_pause",
-    icon: "hass:play-pause",
+    icon: mdiPlayPause,
     serviceName: "start_pause",
     isVisible: (stateObj) =>
       // If start is supported, we don't show this button
@@ -56,26 +65,26 @@ const VACUUM_COMMANDS: VacuumCommand[] = [
   },
   {
     translationKey: "stop",
-    icon: "hass:stop",
+    icon: mdiStop,
     serviceName: "stop",
     isVisible: (stateObj) => supportsFeature(stateObj, VACUUM_SUPPORT_STOP),
   },
   {
     translationKey: "clean_spot",
-    icon: "hass:target-variant",
+    icon: mdiTargetVariant,
     serviceName: "clean_spot",
     isVisible: (stateObj) =>
       supportsFeature(stateObj, VACUUM_SUPPORT_CLEAN_SPOT),
   },
   {
     translationKey: "locate",
-    icon: "hass:map-marker",
+    icon: mdiMapMarker,
     serviceName: "locate",
     isVisible: (stateObj) => supportsFeature(stateObj, VACUUM_SUPPORT_LOCATE),
   },
   {
     translationKey: "return_home",
-    icon: "hass:home-map-marker",
+    icon: mdiHomeMapMarker,
     serviceName: "return_to_base",
     isVisible: (stateObj) =>
       supportsFeature(stateObj, VACUUM_SUPPORT_RETURN_HOME),
@@ -144,10 +153,10 @@ class MoreInfoVacuum extends LitElement {
                   (item) => html`
                     <div>
                       <ha-icon-button
-                        .icon=${item.icon}
+                        .path=${item.icon}
                         .entry=${item}
                         @click=${this.callService}
-                        .title=${this.hass!.localize(
+                        .label=${this.hass!.localize(
                           `ui.dialogs.more_info_control.vacuum.${item.translationKey}`
                         )}
                         .disabled=${stateObj.state === UNAVAILABLE}

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@material/mwc-icon-button";
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
 import { mdiClose, mdiCog, mdiPencil } from "@mdi/js";
@@ -17,7 +16,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-dialog";
 import "../../components/ha-header-bar";
-import "../../components/ha-svg-icon";
+import "../../components/ha-icon-button";
 import { removeEntityRegistryEntry } from "../../data/entity_registry";
 import { CONTINUOUS_DOMAINS } from "../../data/logbook";
 import { showEntityEditorDialog } from "../../panels/config/entities/show-dialog-entity-editor";
@@ -112,15 +111,14 @@ export class MoreInfoDialog extends LitElement {
       >
         <div slot="heading" class="heading">
           <ha-header-bar>
-            <mwc-icon-button
+            <ha-icon-button
               slot="navigationIcon"
               dialogAction="cancel"
               .label=${this.hass.localize(
                 "ui.dialogs.more_info_control.dismiss"
               )}
-            >
+              .path=${mdiClose}
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            ></ha-icon-button>
-            </mwc-icon-button>
             <div
               slot="title"
               class="main-title"
@@ -131,28 +129,26 @@ export class MoreInfoDialog extends LitElement {
             </div>
             ${this.hass.user!.is_admin
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
                     slot="actionItems"
                     .label=${this.hass.localize(
                       "ui.dialogs.more_info_control.settings"
                     )}
+                    .path=${mdiCog}
                     @click=${this._gotoSettings}
-                  >
+                  ></ha-icon-button>
-                    <ha-svg-icon .path=${mdiCog}></ha-svg-icon>
-                  </mwc-icon-button>
                 `
               : ""}
             ${this.shouldShowEditIcon(domain, stateObj)
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
                     slot="actionItems"
                     .label=${this.hass.localize(
                       "ui.dialogs.more_info_control.edit"
                     )}
+                    .path=${mdiPencil}
                     @click=${this._gotoEdit}
-                  >
+                  ></ha-icon-button>
-                    <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
-                  </mwc-icon-button>
                 `
               : ""}
           </ha-header-bar>

src/dialogs/notifications/notification-drawer.js

@@ -64,7 +64,6 @@ export class HuiNotificationDrawer extends EventsMixin(
       <app-toolbar>
         <div main-title>[[localize('ui.notification_drawer.title')]]</div>
         <ha-icon-button-prev hass="[[hass]]" on-click="_closeDrawer"
-          title="[[localize('ui.notification_drawer.close')]]"
           label="[[localize('ui.notification_drawer.close')]]">
         </ha-icon-button-prev>
       </app-toolbar>

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -35,6 +35,7 @@ import "../../components/ha-chip";
 import "../../components/ha-circular-progress";
 import "../../components/ha-dialog";
 import "../../components/ha-header-bar";
+import "../../components/ha-icon-button";
 import { domainToName } from "../../data/integration";
 import { getPanelNameTranslationKey } from "../../data/panel";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
@@ -160,13 +161,12 @@ export class QuickBar extends LitElement {
               ></ha-svg-icon>`}
           ${this._search &&
           html`
-            <mwc-icon-button
+            <ha-icon-button
               slot="suffix"
               @click=${this._clearSearch}
-              title="Clear"
+              .label=${this.hass!.localize("ui.common.clear")}
-            >
+              .path=${mdiClose}
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            ></ha-icon-button>
-            </mwc-icon-button>
           `}
         </paper-input>
         ${!items
@@ -613,7 +613,7 @@ export class QuickBar extends LitElement {
           color: var(--primary-text-color);
         }
 
-        paper-input mwc-icon-button {
+        paper-input ha-icon-button {
           --mdc-icon-button-size: 24px;
           color: var(--primary-text-color);
         }

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -1,4 +1,5 @@
 /* eslint-disable lit/prefer-static-styles */
+import { mdiMicrophone } from "@mdi/js";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import type { PaperDialogScrollableElement } from "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
@@ -179,7 +180,7 @@ export class HaVoiceCommandDialog extends LitElement {
                         `
                       : ""}
                     <ha-icon-button
-                      icon="hass:microphone"
+                      .path=${mdiMicrophone}
                       @click=${this._toggleListening}
                     >
                     </ha-icon-button>

src/layouts/hass-tabs-subpage-data-table.ts

@@ -157,6 +157,7 @@ export class HaTabsSubpageDataTable extends LitElement {
       : hiddenLabel;
 
     const headerToolbar = html`<search-input
+        .hass=${this.hass}
         .filter=${this.filter}
         no-label-float
         no-underline
@@ -205,6 +206,7 @@ export class HaTabsSubpageDataTable extends LitElement {
             `
           : ""}
         <ha-data-table
+          .hass=${this.hass}
           .columns=${this.columns}
           .data=${this.data}
           .filter=${this.filter}

src/panels/calendar/ha-full-calendar.ts

@@ -11,7 +11,14 @@ import listPlugin from "@fullcalendar/list";
 // @ts-ignore
 import listStyle from "@fullcalendar/list/main.css";
 import "@material/mwc-button";
-import { mdiViewAgenda, mdiViewDay, mdiViewModule, mdiViewWeek } from "@mdi/js";
+import {
+  mdiChevronLeft,
+  mdiChevronRight,
+  mdiViewAgenda,
+  mdiViewDay,
+  mdiViewModule,
+  mdiViewWeek,
+} from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -118,15 +125,15 @@ export class HAFullCalendar extends LitElement {
                         )}</mwc-button
                       >
                       <ha-icon-button
-                        label=${this.hass.localize("ui.common.previous")}
+                        .label=${this.hass.localize("ui.common.previous")}
-                        icon="hass:chevron-left"
+                        .path=${mdiChevronLeft}
                         class="prev"
                         @click=${this._handlePrev}
                       >
                       </ha-icon-button>
                       <ha-icon-button
-                        label=${this.hass.localize("ui.common.next")}
+                        .label=${this.hass.localize("ui.common.next")}
-                        icon="hass:chevron-right"
+                        .path=${mdiChevronRight}
                         class="next"
                         @click=${this._handleNext}
                       >
@@ -144,15 +151,15 @@ export class HAFullCalendar extends LitElement {
                       <h1>${this.calendar.view.title}</h1>
                       <div>
                         <ha-icon-button
-                          label=${this.hass.localize("ui.common.previous")}
+                          .label=${this.hass.localize("ui.common.previous")}
-                          icon="hass:chevron-left"
+                          .path=${mdiChevronLeft}
                           class="prev"
                           @click=${this._handlePrev}
                         >
                         </ha-icon-button>
                         <ha-icon-button
-                          label=${this.hass.localize("ui.common.next")}
+                          .label=${this.hass.localize("ui.common.next")}
-                          icon="hass:chevron-right"
+                          .path=${mdiChevronRight}
                           class="next"
                           @click=${this._handleNext}
                         >

src/panels/calendar/ha-panel-calendar.ts

@@ -1,5 +1,6 @@
 import "@material/mwc-checkbox";
 import "@material/mwc-formfield";
+import { mdiRefresh } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
@@ -15,6 +16,7 @@ import { styleMap } from "lit/directives/style-map";
 import { LocalStorage } from "../../common/decorators/local-storage";
 import { HASSDomEvent } from "../../common/dom/fire_event";
 import "../../components/ha-card";
+import "../../components/ha-icon-button";
 import "../../components/ha-menu-button";
 import {
   Calendar,
@@ -66,7 +68,8 @@ class PanelCalendar extends LitElement {
             ></ha-menu-button>
             <div main-title>${this.hass.localize("panel.calendar")}</div>
             <ha-icon-button
-              icon="hass:refresh"
+              .path=${mdiRefresh}
+              .label=${this.hass.localize("ui.common.refresh")}
               @click=${this._handleRefresh}
             ></ha-icon-button>
           </app-toolbar>

src/panels/config/areas/ha-config-area-page.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiCog } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
@@ -6,6 +7,7 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-card";
+import "../../../components/ha-icon-button";
 import {
   AreaRegistryEntry,
   deleteAreaRegistryEntry,
@@ -136,9 +138,10 @@ class HaConfigAreaPage extends LitElement {
 
         <ha-icon-button
           slot="toolbar-icon"
-          icon="hass:cog"
+          .path=${mdiCog}
           .entry=${area}
           @click=${this._showSettings}
+          .label=${this.hass.localize("ui.panel.config.areas.edit_settings")}
         ></ha-icon-button>
 
         <div class="container">

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -1,4 +1,4 @@
-import { mdiPlus } from "@mdi/js";
+import { mdiHelpCircle, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -147,7 +147,8 @@ export class HaConfigAreasDashboard extends LitElement {
       >
         <ha-icon-button
           slot="toolbar-icon"
-          icon="hass:help-circle"
+          .label=${this.hass.localize("ui.common.help")}
+          .path=${mdiHelpCircle}
           @click=${this._showHelp}
         ></ha-icon-button>
         <ha-fab

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
@@ -7,13 +6,13 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
-import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-icon-button";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { Action } from "../../../../data/script";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -124,41 +123,32 @@ export default class HaAutomationActionRow extends LitElement {
           <div class="card-menu">
             ${this.index !== 0
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
-                    .title=${this.hass.localize(
-                      "ui.panel.config.automation.editor.move_up"
-                    )}
                     .label=${this.hass.localize(
                       "ui.panel.config.automation.editor.move_up"
                     )}
+                    .path=${mdiArrowUp}
                     @click=${this._moveUp}
-                  >
+                  ></ha-icon-button>
-                    <ha-svg-icon .path=${mdiArrowUp}></ha-svg-icon>
-                  </mwc-icon-button>
                 `
               : ""}
             ${this.index !== this.totalActions - 1
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
-                    .title=${this.hass.localize(
-                      "ui.panel.config.automation.editor.move_down"
-                    )}
                     .label=${this.hass.localize(
                       "ui.panel.config.automation.editor.move_down"
                     )}
+                    .path=${mdiArrowDown}
                     @click=${this._moveDown}
-                  >
+                  ></ha-icon-button>
-                    <ha-svg-icon .path=${mdiArrowDown}></ha-svg-icon>
-                  </mwc-icon-button>
                 `
               : ""}
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
-              <mwc-icon-button
+              <ha-icon-button
                 slot="trigger"
-                .title=${this.hass.localize("ui.common.menu")}
+                .label=${this.hass.localize("ui.common.menu")}
-                .label=${this.hass.localize("ui.common.overflow_menu")}
+                .path=${mdiDotsVertical}
-                ><ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+              ></ha-icon-button>
-              </mwc-icon-button>
               <mwc-list-item .disabled=${!this._uiModeAvailable}>
                 ${yamlMode
                   ? this.hass.localize(

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -5,6 +5,7 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { ensureArray } from "../../../../../common/ensure-array";
+import "../../../../../components/ha-icon-button";
 import { Condition } from "../../../../../data/automation";
 import { Action, ChooseAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
@@ -28,15 +29,14 @@ export class HaChooseAction extends LitElement implements ActionElement {
     return html`
       ${(action.choose ? ensureArray(action.choose) : []).map(
         (option, idx) => html`<ha-card>
-          <mwc-icon-button
+          <ha-icon-button
             .idx=${idx}
             @click=${this._removeOption}
-            title=${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.config.automation.editor.actions.type.choose.remove_option"
             )}
-          >
+            .path=${mdiDelete}
-            <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+          ></ha-icon-button>
-          </mwc-icon-button>
           <div class="card-content">
             <h2>
               ${this.hass.localize(
@@ -161,7 +161,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
           display: block;
           text-align: center;
         }
-        mwc-icon-button {
+        ha-icon-button {
           position: absolute;
           right: 0;
           padding: 4px;

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -60,12 +60,12 @@ export default class HaAutomationConditionRow extends LitElement {
         <div class="card-content">
           <div class="card-menu">
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
-              <mwc-icon-button
+              <ha-icon-button
-                .title=${this.hass.localize("ui.common.menu")}
-                .label=${this.hass.localize("ui.common.overflow_menu")}
                 slot="trigger"
-                ><ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon
+                .label=${this.hass.localize("ui.common.menu")}
-              ></mwc-icon-button>
+                .path=${mdiDotsVertical}
+              >
+              </ha-icon-button>
               <mwc-list-item>
                 ${this._yamlMode
                   ? this.hass.localize(

src/panels/config/automation/ha-automation-editor.ts

@@ -122,12 +122,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           @action=${this._handleMenuAction}
           activatable
         >
-          <mwc-icon-button
+          <ha-icon-button
             slot="trigger"
-            .title=${this.hass.localize("ui.common.menu")}
+            .label=${this.hass.localize("ui.common.menu")}
-            .label=${this.hass.localize("ui.common.overflow_menu")}
+            .path=${mdiDotsVertical}
-            ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+          ></ha-icon-button>
-          </mwc-icon-button>
 
           <mwc-list-item
             aria-label=${this.hass.localize(

src/panels/config/automation/ha-automation-picker.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
 import {
   mdiHelpCircle,
   mdiHistory,
@@ -21,6 +20,7 @@ import { DataTableColumnContainer } from "../../../components/data-table/ha-data
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-button-related-filter-menu";
 import "../../../components/ha-fab";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import {
   AutomationEntity,
@@ -147,15 +147,14 @@ class HaAutomationPicker extends LitElement {
         title: "",
         type: "icon-button",
         template: (_info, automation) => html`
-          <mwc-icon-button
+          <ha-icon-button
             .automation=${automation}
             @click=${this._showInfo}
             .label=${this.hass.localize(
               "ui.panel.config.automation.picker.show_info_automation"
             )}
-          >
+            .path=${mdiInformationOutline}
-            <ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
+          ></ha-icon-button>
-          </mwc-icon-button>
         `,
       };
       columns.trace = {
@@ -169,14 +168,13 @@ class HaAutomationPicker extends LitElement {
                 : undefined
             )}
           >
-            <mwc-icon-button
+            <ha-icon-button
               .label=${this.hass.localize(
                 "ui.panel.config.automation.picker.dev_automation"
               )}
+              .path=${mdiHistory}
               .disabled=${!automation.attributes.id}
-            >
+            ></ha-icon-button>
-              <ha-svg-icon .path=${mdiHistory}></ha-svg-icon>
-            </mwc-icon-button>
           </a>
           ${!automation.attributes.id
             ? html`
@@ -200,16 +198,13 @@ class HaAutomationPicker extends LitElement {
                 : undefined
             )}
           >
-            <mwc-icon-button
+            <ha-icon-button
               .disabled=${!automation.attributes.id}
               .label=${this.hass.localize(
                 "ui.panel.config.automation.picker.edit_automation"
               )}
-            >
-              <ha-svg-icon
               .path=${automation.attributes.id ? mdiPencil : mdiPencilOff}
-              ></ha-svg-icon>
+            ></ha-icon-button>
-            </mwc-icon-button>
           </a>
           ${!automation.attributes.id
             ? html`
@@ -244,9 +239,12 @@ class HaAutomationPicker extends LitElement {
         @clear-filter=${this._clearFilter}
         hasFab
       >
-        <mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
+        <ha-icon-button
-          <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+          slot="toolbar-icon"
-        </mwc-icon-button>
+          .label=${this.hass.localize("ui.common.help")}
+          .path=${mdiHelpCircle}
+          @click=${this._showHelp}
+        ></ha-icon-button>
         <ha-button-related-filter-menu
           slot="filter-menu"
           corner="BOTTOM_START"

src/panels/config/automation/ha-automation-trace.ts

@@ -11,7 +11,18 @@ import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
+import "../../../components/ha-icon-button";
+import "../../../components/trace/ha-trace-blueprint-config";
+import "../../../components/trace/ha-trace-config";
+import "../../../components/trace/ha-trace-logbook";
+import "../../../components/trace/ha-trace-path-details";
+import "../../../components/trace/ha-trace-timeline";
 import "../../../components/trace/hat-script-graph";
+import type {
+  HatScriptGraph,
+  NodeInfo,
+} from "../../../components/trace/hat-script-graph";
+import { traceTabStyles } from "../../../components/trace/trace-tab-styles";
 import { AutomationEntity } from "../../../data/automation";
 import { getLogbookDataForContext, LogbookEntry } from "../../../data/logbook";
 import {
@@ -24,16 +35,6 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
-import "../../../components/trace/ha-trace-blueprint-config";
-import "../../../components/trace/ha-trace-config";
-import "../../../components/trace/ha-trace-logbook";
-import "../../../components/trace/ha-trace-path-details";
-import "../../../components/trace/ha-trace-timeline";
-import { traceTabStyles } from "../../../components/trace/trace-tab-styles";
-import type {
-  HatScriptGraph,
-  NodeInfo,
-} from "../../../components/trace/hat-script-graph";
 
 @customElement("ha-automation-trace")
 export class HaAutomationTrace extends LitElement {
@@ -90,16 +91,19 @@ export class HaAutomationTrace extends LitElement {
     }
 
     const actionButtons = html`
-      <mwc-icon-button label="Refresh" @click=${this._refreshTraces}>
+      <ha-icon-button
-        <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
+        .label=${this.hass.localize("ui.panel.config.automation.trace.refresh")}
-      </mwc-icon-button>
+        .path=${mdiRefresh}
-      <mwc-icon-button
+        @click=${this._refreshTraces}
+      ></ha-icon-button>
+      <ha-icon-button
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.trace.download_trace"
+        )}
+        .path=${mdiDownload}
         .disabled=${!this._trace}
-        label="Download Trace"
         @click=${this._downloadTrace}
-      >
+      ></ha-icon-button>
-        <ha-svg-icon .path=${mdiDownload}></ha-svg-icon>
-      </mwc-icon-button>
     `;
 
     return html`
@@ -122,23 +126,28 @@ export class HaAutomationTrace extends LitElement {
                   class="linkButton"
                   href="/config/automation/edit/${this.automationId}"
                 >
-                  <mwc-icon-button label="Edit Automation" tabindex="-1">
+                  <ha-icon-button
-                    <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+                    .label=${this.hass!.localize(
-                  </mwc-icon-button>
+                      "ui.panel.config.automation.trace.edit_automation"
+                    )}
+                    .path=${mdiPencil}
+                    tabindex="-1"
+                  ></ha-icon-button>
                 </a>
               </div>`
             : ""}
           ${this._traces && this._traces.length > 0
             ? html`
                 <div>
-                  <mwc-icon-button
+                  <ha-icon-button
+                    .label=${this.hass!.localize(
+                      "ui.panel.config.automation.trace.older_trace"
+                    )}
+                    .path=${mdiRayEndArrow}
                     .disabled=${this._traces[this._traces.length - 1].run_id ===
                     this._runId}
-                    label="Older trace"
                     @click=${this._pickOlderTrace}
-                  >
+                  ></ha-icon-button>
-                    <ha-svg-icon .path=${mdiRayEndArrow}></ha-svg-icon>
-                  </mwc-icon-button>
                   <select .value=${this._runId} @change=${this._pickTrace}>
                     ${repeat(
                       this._traces,
@@ -152,13 +161,14 @@ export class HaAutomationTrace extends LitElement {
                         </option>`
                     )}
                   </select>
-                  <mwc-icon-button
+                  <ha-icon-button
+                    .label=${this.hass!.localize(
+                      "ui.panel.config.automation.trace.newer_trace"
+                    )}
+                    .path=${mdiRayStartArrow}
                     .disabled=${this._traces[0].run_id === this._runId}
-                    label="Newer trace"
                     @click=${this._pickNewerTrace}
-                  >
+                  ></ha-icon-button>
-                    <ha-svg-icon .path=${mdiRayStartArrow}></ha-svg-icon>
-                  </mwc-icon-button>
                 </div>
               `
             : ""}

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -94,12 +94,11 @@ export default class HaAutomationTriggerRow extends LitElement {
         <div class="card-content">
           <div class="card-menu">
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
-              <mwc-icon-button
+              <ha-icon-button
                 slot="trigger"
-                .title=${this.hass.localize("ui.common.menu")}
+                .label=${this.hass.localize("ui.common.menu")}
-                .label=${this.hass.localize("ui.common.overflow_menu")}
+                .path=${mdiDotsVertical}
-                ><ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon
+              ></ha-icon-button>
-              ></mwc-icon-button>
               <mwc-list-item .disabled=${selected === -1}>
                 ${yamlMode
                   ? this.hass.localize(

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
 import {
   mdiDelete,
   mdiDownload,
@@ -22,6 +21,7 @@ import { extractSearchParam } from "../../../common/url/search-params";
 import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-fab";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import { showAutomationEditor } from "../../../data/automation";
 import {
@@ -119,18 +119,14 @@ class HaBlueprintOverview extends LitElement {
           blueprint.error
             ? ""
             : narrow
-            ? html`<mwc-icon-button
+            ? html` <ha-icon-button
                 .blueprint=${blueprint}
                 .label=${this.hass.localize(
                   "ui.panel.config.blueprint.overview.use_blueprint"
                 )}
-                title=${this.hass.localize(
+                .path=${mdiRobot}
-                  "ui.panel.config.blueprint.overview.use_blueprint"
-                )}
                 @click=${this._createNew}
-              >
+              ></ha-icon-button>`
-                <ha-svg-icon .path=${mdiRobot}></ha-svg-icon>
-              </mwc-icon-button>`
             : html`<mwc-button
                 .blueprint=${blueprint}
                 @click=${this._createNew}
@@ -146,7 +142,7 @@ class HaBlueprintOverview extends LitElement {
         template: (_, blueprint: any) =>
           blueprint.error
             ? ""
-            : html`<mwc-icon-button
+            : html`<ha-icon-button
                 .blueprint=${blueprint}
                 .disabled=${!blueprint.source_url}
                 .label=${this.hass.localize(
@@ -154,9 +150,9 @@ class HaBlueprintOverview extends LitElement {
                     ? "ui.panel.config.blueprint.overview.share_blueprint"
                     : "ui.panel.config.blueprint.overview.share_blueprint_no_url"
                 )}
+                .path=${mdiShareVariant}
                 @click=${this._share}
-                ><ha-svg-icon .path=${mdiShareVariant}></ha-svg-icon
+              ></ha-icon-button>`,
-              ></mwc-icon-button>`,
       },
       delete: {
         title: "",
@@ -164,14 +160,14 @@ class HaBlueprintOverview extends LitElement {
         template: (_, blueprint: any) =>
           blueprint.error
             ? ""
-            : html` <mwc-icon-button
+            : html` <ha-icon-button
                 .blueprint=${blueprint}
                 .label=${this.hass.localize(
                   "ui.panel.config.blueprint.overview.delete_blueprint"
                 )}
+                .path=${mdiDelete}
                 @click=${this._delete}
-                ><ha-svg-icon .path=${mdiDelete}></ha-svg-icon
+              ></ha-icon-button>`,
-              ></mwc-icon-button>`,
       },
     })
   );
@@ -220,9 +216,12 @@ class HaBlueprintOverview extends LitElement {
           </a>
         </div>`}
       >
-        <mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
+        <ha-icon-button
-          <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+          slot="toolbar-icon"
-        </mwc-icon-button>
+          .label=${this.hass.localize("ui.common.help")}
+          .path=${mdiHelpCircle}
+          @click=${this._showHelp}
+        ></ha-icon-button>
         <ha-fab
           slot="fab"
           .label=${this.hass.localize(

src/panels/config/cloud/alexa/cloud-alexa.ts

@@ -116,16 +116,14 @@ class CloudAlexa extends LitElement {
         ? exposedCards
         : notExposedCards;
 
-      const iconButton = html`<mwc-icon-button
+      const iconButton = html`<ha-icon-button
         slot="trigger"
         class=${classMap({
           exposed: isExposed!,
           "not-exposed": !isExposed,
         })}
         .disabled=${!emptyFilter}
-        .title=${this.hass!.localize("ui.panel.config.cloud.alexa.expose")}
+        .label=${this.hass!.localize("ui.panel.config.cloud.alexa.expose")}
-      >
-        <ha-svg-icon
         .path=${config.should_expose !== null
           ? isExposed
             ? mdiCheckboxMarked
@@ -133,8 +131,7 @@ class CloudAlexa extends LitElement {
           : isDomainExposed
           ? mdiCheckboxMultipleMarked
           : mdiCloseBoxMultiple}
-        ></ha-svg-icon>
+      ></ha-icon-button>`;
-      </mwc-icon-button>`;
 
       target.push(html`
         <ha-card>

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -122,16 +122,14 @@ class CloudGoogleAssistant extends LitElement {
         ? exposedCards
         : notExposedCards;
 
-      const iconButton = html`<mwc-icon-button
+      const iconButton = html`<ha-icon-button
         slot="trigger"
         class=${classMap({
           exposed: isExposed!,
           "not-exposed": !isExposed,
         })}
         .disabled=${!emptyFilter}
-        .title=${this.hass!.localize("ui.panel.config.cloud.google.expose")}
+        .label=${this.hass!.localize("ui.panel.config.cloud.google.expose")}
-      >
-        <ha-svg-icon
         .path=${config.should_expose !== null
           ? isExposed
             ? mdiCheckboxMarked
@@ -139,8 +137,7 @@ class CloudGoogleAssistant extends LitElement {
           : isDomainExposed
           ? mdiCheckboxMultipleMarked
           : mdiCloseBoxMultiple}
-        ></ha-svg-icon>
+      ></ha-icon-button>`;
-      </mwc-icon-button>`;
 
       target.push(html`
         <ha-card>

src/panels/config/cloud/login/cloud-login.js

@@ -9,6 +9,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeRTL } from "../../../../common/util/compute_rtl";
 import "../../../../components/buttons/ha-progress-button";
 import "../../../../components/ha-card";
+import "../../../../components/ha-icon";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-next";
 import "../../../../layouts/hass-subpage";
@@ -120,9 +121,12 @@ class CloudLogin extends LocalizeMixin(
             <ha-card hidden$="[[!flashMessage]]">
               <div class="card-content flash-msg">
                 [[flashMessage]]
-                <ha-icon-button icon="hass:close" on-click="_dismissFlash"
+                <ha-icon-button
-                  >[[localize('ui.panel.config.cloud.login.dismiss')]]</ha-icon-button
+                  label="[[localize('ui.panel.config.cloud.login.dismiss')]]"
+                  on-click="_dismissFlash"
                 >
+                  <ha-icon icon="hass:close"></ha-icon>
+                </ha-icon-button>
                 <paper-ripple id="flashRipple" noink=""></paper-ripple>
               </div>
             </ha-card>

src/panels/config/customize/ha-customize-attribute.js

@@ -1,6 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import hassAttributeUtil from "../../../util/hass-attributes-util";
 import "../ha-form-style";
@@ -28,11 +29,9 @@ class HaCustomizeAttribute extends PolymerElement {
         }
       </style>
       <div id="wrapper" class="form-group"></div>
-      <ha-icon-button
+      <ha-icon-button class="button" on-click="tapButton">
-        class="button"
+        <ha-icon icon="[[getIcon(item.secondary)]]"></ha-icon>
-        icon="[[getIcon(item.secondary)]]"
+      </ha-icon-button>
-        on-click="tapButton"
-      ></ha-icon-button>
     `;
   }
 

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -7,7 +7,6 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-menu-button";
-import "../../../components/ha-svg-icon";
 import { CloudStatus } from "../../../data/cloud";
 import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -25,7 +25,7 @@ class DialogDeviceRegistryDetail extends LitElement {
 
   @state() private _params?: DeviceRegistryDetailDialogParams;
 
-  @state() private _areaId?: string | null;
+  @property() public _areaId?: string | null;
 
   @state() private _disabledBy!: string | null;
 

src/panels/config/devices/ha-config-device-page.ts

@@ -1,3 +1,4 @@
+import { mdiPencil, mdiPlusCircle } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -9,6 +10,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stringCompare } from "../../../common/string/compare";
 import { slugify } from "../../../common/string/slugify";
 import "../../../components/entity/ha-battery-icon";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import { AreaRegistryEntry } from "../../../data/area_registry";
 import {
@@ -184,8 +186,11 @@ export class HaConfigDevicePage extends LitElement {
                 </span>
                 <ha-icon-button
                   slot="toolbar-icon"
-                  icon="hass:pencil"
+                  .path=${mdiPencil}
                   @click=${this._showSettings}
+                  .label=${this.hass.localize(
+                    "ui.panel.config.devices.edit_settings"
+                  )}
                 ></ha-icon-button>
               `
             : ""
@@ -216,8 +221,11 @@ export class HaConfigDevicePage extends LitElement {
                           : ""}
                       </div>
                       <ha-icon-button
-                        icon="hass:pencil"
+                        .path=${mdiPencil}
                         @click=${this._showSettings}
+                        .label=${this.hass.localize(
+                          "ui.panel.config.devices.edit_settings"
+                        )}
                       ></ha-icon-button>
                     </div>
                   `
@@ -315,14 +323,14 @@ export class HaConfigDevicePage extends LitElement {
                         <ha-icon-button
                           @click=${this._showAutomationDialog}
                           .disabled=${device.disabled_by}
-                          title=${device.disabled_by
+                          .label=${device.disabled_by
                             ? this.hass.localize(
                                 "ui.panel.config.devices.automation.create_disabled"
                               )
                             : this.hass.localize(
                                 "ui.panel.config.devices.automation.create"
                               )}
-                          icon="hass:plus-circle"
+                          .path=${mdiPlusCircle}
                         ></ha-icon-button>
                       </h1>
                       ${this._related?.automation?.length
@@ -387,10 +395,10 @@ export class HaConfigDevicePage extends LitElement {
                             "ui.panel.config.devices.scene.scenes"
                           )}
 
-                                  <ha-icon-button
+                          <ha-icon-button @click=${
-                                    @click=${this._createScene}
+                            this._createScene
-                                    .disabled=${device.disabled_by}
+                          } .disabled=${device.disabled_by}
-                                    title=${
+                            .label=${
                               device.disabled_by
                                 ? this.hass.localize(
                                     "ui.panel.config.devices.scene.create_disabled"
@@ -399,7 +407,7 @@ export class HaConfigDevicePage extends LitElement {
                                     "ui.panel.config.devices.scene.create"
                                   )
                             }
-                                    icon="hass:plus-circle"
+                            .path=${mdiPlusCircle}
                           ></ha-icon-button>
                         </h1>
 
@@ -471,14 +479,14 @@ export class HaConfigDevicePage extends LitElement {
                           <ha-icon-button
                             @click=${this._showScriptDialog}
                             .disabled=${device.disabled_by}
-                            title=${device.disabled_by
+                            .label=${device.disabled_by
                               ? this.hass.localize(
                                   "ui.panel.config.devices.script.create_disabled"
                                 )
                               : this.hass.localize(
                                   "ui.panel.config.devices.script.create"
                                 )}
-                            icon="hass:plus-circle"
+                            .path=${mdiPlusCircle}
                           ></ha-icon-button>
                         </h1>
                         ${this._related?.script?.length

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -17,6 +17,7 @@ import {
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-button-menu";
+import "../../../components/ha-icon-button";
 import { AreaRegistryEntry } from "../../../data/area_registry";
 import { ConfigEntry } from "../../../data/config_entries";
 import {
@@ -407,17 +408,13 @@ export class HaConfigDeviceDashboard extends LitElement {
             </a>`
           : html``}
         <ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
-          <mwc-icon-button
+          <ha-icon-button
             slot="trigger"
             .label=${this.hass!.localize(
               "ui.panel.config.devices.picker.filter.filter"
             )}
-            .title=${this.hass!.localize(
+            .path=${mdiFilterVariant}
-              "ui.panel.config.devices.picker.filter.filter"
+          ></ha-icon-button>
-            )}
-          >
-            <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
-          </mwc-icon-button>
           <mwc-list-item
             @request-selected=${this._showDisabledChanged}
             graphic="control"

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
 import "../../../../components/ha-settings-row";
 import {
   BatterySourceTypeEnergyPreference,
@@ -14,8 +15,8 @@ import {
   saveEnergyPreferences,
 } from "../../../../data/energy";
 import {
-  showConfirmationDialog,
   showAlertDialog,
+  showConfirmationDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -105,12 +106,14 @@ export class EnergyBatterySettings extends LitElement {
                       : source.stat_energy_to}</span
                   >
                 </div>
-                <mwc-icon-button @click=${this._editSource}>
+                <ha-icon-button
-                  <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+                  @click=${this._editSource}
-                </mwc-icon-button>
+                  .path=${mdiPencil}
-                <mwc-icon-button @click=${this._deleteSource}>
+                ></ha-icon-button>
-                  <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                <ha-icon-button
-                </mwc-icon-button>
+                  @click=${this._deleteSource}
+                  .path=${mdiDelete}
+                ></ha-icon-button>
               </div>
             `;
           })}

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -6,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
 import {
   DeviceConsumptionEnergyPreference,
   EnergyPreferences,
@@ -13,8 +14,8 @@ import {
   saveEnergyPreferences,
 } from "../../../../data/energy";
 import {
-  showConfirmationDialog,
   showAlertDialog,
+  showConfirmationDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -84,9 +85,11 @@ export class EnergyDeviceSettings extends LitElement {
                     ? computeStateName(entityState)
                     : device.stat_consumption}</span
                 >
-                <mwc-icon-button @click=${this._deleteDevice} .device=${device}>
+                <ha-icon-button
-                  <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                  @click=${this._deleteDevice}
-                </mwc-icon-button>
+                  .device=${device}
+                  .path=${mdiDelete}
+                ></ha-icon-button>
               </div>
             `;
           })}

src/panels/config/energy/components/ha-energy-gas-settings.ts

@@ -5,17 +5,18 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
 import {
   EnergyPreferences,
-  saveEnergyPreferences,
-  GasSourceTypeEnergyPreference,
   EnergyPreferencesValidation,
   EnergyValidationIssue,
+  GasSourceTypeEnergyPreference,
   getEnergyGasUnitCategory,
+  saveEnergyPreferences,
 } from "../../../../data/energy";
 import {
-  showConfirmationDialog,
   showAlertDialog,
+  showConfirmationDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -92,12 +93,14 @@ export class EnergyGasSettings extends LitElement {
                     ? computeStateName(entityState)
                     : source.stat_energy_from}</span
                 >
-                <mwc-icon-button @click=${this._editSource}>
+                <ha-icon-button
-                  <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+                  @click=${this._editSource}
-                </mwc-icon-button>
+                  .path=${mdiPencil}
-                <mwc-icon-button @click=${this._deleteSource}>
+                ></ha-icon-button>
-                  <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                <ha-icon-button
-                </mwc-icon-button>
+                  @click=${this._deleteSource}
+                  .path=${mdiDelete}
+                ></ha-icon-button>
               </div>
             `;
           })}

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
 import {
   ConfigEntry,
   deleteConfigEntry,
@@ -130,12 +131,14 @@ export class EnergyGridSettings extends LitElement {
                     ? computeStateName(entityState)
                     : flow.stat_energy_from}</span
                 >
-                <mwc-icon-button @click=${this._editFromSource}>
+                <ha-icon-button
-                  <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+                  @click=${this._editFromSource}
-                </mwc-icon-button>
+                  .path=${mdiPencil}
-                <mwc-icon-button @click=${this._deleteFromSource}>
+                ></ha-icon-button>
-                  <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                <ha-icon-button
-                </mwc-icon-button>
+                  @click=${this._deleteFromSource}
+                  .path=${mdiDelete}
+                ></ha-icon-button>
               </div>
             `;
           })}
@@ -167,12 +170,14 @@ export class EnergyGridSettings extends LitElement {
                     ? computeStateName(entityState)
                     : flow.stat_energy_to}</span
                 >
-                <mwc-icon-button @click=${this._editToSource}>
+                <ha-icon-button
-                  <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+                  @click=${this._editToSource}
-                </mwc-icon-button>
+                  .path=${mdiPencil}
-                <mwc-icon-button @click=${this._deleteToSource}>
+                ></ha-icon-button>
-                  <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                <ha-icon-button
-                </mwc-icon-button>
+                  @click=${this._deleteToSource}
+                  .path=${mdiDelete}
+                ></ha-icon-button>
               </div>
             `;
           })}
@@ -202,13 +207,12 @@ export class EnergyGridSettings extends LitElement {
               />
               <span class="content">${entry.title}</span>
               <a href=${`/config/integrations#config_entry=${entry.entry_id}`}>
-                <mwc-icon-button>
+                <ha-icon-button .path=${mdiPencil}></ha-icon-button>
-                  <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
-                </mwc-icon-button>
               </a>
-              <mwc-icon-button @click=${this._removeCO2Sensor}>
+              <ha-icon-button
-                <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                @click=${this._removeCO2Sensor}
-              </mwc-icon-button>
+                .path=${mdiDelete}
+              ></ha-icon-button>
             </div>`
           )}
           ${this._configEntries?.length === 0

src/panels/config/energy/components/ha-energy-solar-settings.ts

@@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
 import {
   EnergyInfo,
   EnergyPreferences,
@@ -102,14 +103,16 @@ export class EnergySolarSettings extends LitElement {
                 >
                 ${this.info
                   ? html`
-                      <mwc-icon-button @click=${this._editSource}>
+                      <ha-icon-button
-                        <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
+                        @click=${this._editSource}
-                      </mwc-icon-button>
+                        .path=${mdiPencil}
+                      ></ha-icon-button>
                     `
                   : ""}
-                <mwc-icon-button @click=${this._deleteSource}>
+                <ha-icon-button
-                  <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                  @click=${this._deleteSource}
-                </mwc-icon-button>
+                  .path=${mdiDelete}
+                ></ha-icon-button>
               </div>
             `;
           })}

src/panels/config/energy/components/styles.ts

@@ -31,7 +31,7 @@ export const energyCardStyles = css`
   .row .content {
     flex-grow: 1;
   }
-  mwc-icon-button {
+  ha-icon-button {
     color: var(--secondary-text-color);
   }
 `;

src/panels/config/energy/ha-config-energy.ts

@@ -1,6 +1,5 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../components/ha-svg-icon";
 import {
   EnergyPreferencesValidation,
   getEnergyPreferenceValidation,

src/panels/config/entities/dialog-entity-editor.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
 import { mdiClose, mdiTune } from "@mdi/js";
@@ -11,8 +10,8 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-dialog";
 import "../../../components/ha-header-bar";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-related-items";
-import "../../../components/ha-svg-icon";
 import {
   EntityRegistryEntry,
   ExtEntityRegistryEntry,
@@ -82,27 +81,25 @@ export class DialogEntityEditor extends LitElement {
       >
         <div slot="heading">
           <ha-header-bar>
-            <mwc-icon-button
+            <ha-icon-button
               slot="navigationIcon"
               .label=${this.hass.localize("ui.dialogs.entity_registry.dismiss")}
+              .path=${mdiClose}
               dialogAction="cancel"
-            >
+            ></ha-icon-button>
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            </mwc-icon-button>
             <span slot="title">
               ${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
             </span>
             ${stateObj
               ? html`
-                  <mwc-icon-button
+                  <ha-icon-button
                     slot="actionItems"
                     .label=${this.hass.localize(
                       "ui.dialogs.entity_registry.control"
                     )}
+                    .path=${mdiTune}
                     @click=${this._openMoreInfo}
-                  >
+                  ></ha-icon-button>
-                    <ha-svg-icon .path=${mdiTune}></ha-svg-icon>
-                  </mwc-icon-button>
                 `
               : ""}
           </ha-header-bar>

src/panels/config/entities/ha-config-entities.ts

@@ -14,7 +14,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import memoize from "memoize-one";
@@ -33,6 +33,7 @@ import type {
   SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button-menu";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import {
   AreaRegistryEntry,
@@ -540,32 +541,35 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                       >
                     `
                   : html`
-                      <mwc-icon-button
+                      <ha-icon-button
                         id="enable-btn"
                         @click=${this._enableSelected}
-                        ><ha-svg-icon .path=${mdiUndo}></ha-svg-icon
+                        .path=${mdiUndo}
-                      ></mwc-icon-button>
+                        .label=${this.hass.localize("ui.common.enable")}
+                      ></ha-icon-button>
                       <paper-tooltip animation-delay="0" for="enable-btn">
                         ${this.hass.localize(
                           "ui.panel.config.entities.picker.enable_selected.button"
                         )}
                       </paper-tooltip>
-                      <mwc-icon-button
+                      <ha-icon-button
                         id="disable-btn"
                         @click=${this._disableSelected}
-                        ><ha-svg-icon .path=${mdiCancel}></ha-svg-icon
+                        .path=${mdiCancel}
-                      ></mwc-icon-button>
+                        .label=${this.hass.localize("ui.common.disable")}
+                      ></ha-icon-button>
                       <paper-tooltip animation-delay="0" for="disable-btn">
                         ${this.hass.localize(
                           "ui.panel.config.entities.picker.disable_selected.button"
                         )}
                       </paper-tooltip>
-                      <mwc-icon-button
+                      <ha-icon-button
                         class="warning"
                         id="remove-btn"
                         @click=${this._removeSelected}
-                        ><ha-svg-icon .path=${mdiDelete}></ha-svg-icon
+                        .path=${mdiDelete}
-                      ></mwc-icon-button>
+                        .label=${this.hass.localize("ui.common.remove")}
+                      ></ha-icon-button>
                       <paper-tooltip animation-delay="0" for="remove-btn">
                         ${this.hass.localize(
                           "ui.panel.config.entities.picker.remove_selected.button"
@@ -575,17 +579,13 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
               </div>
             </div> `
           : html`<ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
-              <mwc-icon-button
+              <ha-icon-button
                 slot="trigger"
                 .label=${this.hass!.localize(
                   "ui.panel.config.entities.picker.filter.filter"
                 )}
-                .title=${this.hass!.localize(
+                .path=${mdiFilterVariant}
-                  "ui.panel.config.entities.picker.filter.filter"
+              ></ha-icon-button>
-                )}
-              >
-                <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
-              </mwc-icon-button>
               <mwc-list-item
                 @request-selected=${this._showDisabledChanged}
                 graphic="control"
@@ -896,7 +896,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           margin-right: -12px;
         }
         .header-btns > mwc-button,
-        .header-btns > mwc-icon-button {
+        .header-btns > ha-icon-button {
           margin: 8px;
         }
         ha-button-menu {

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -1,10 +1,11 @@
 import "@material/mwc-button/mwc-button";
+import { mdiDelete } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-input";
@@ -89,11 +90,11 @@ class HaInputSelectForm extends LitElement {
                   <paper-item-body> ${option} </paper-item-body>
                   <ha-icon-button
                     .index=${index}
-                    .title=${this.hass.localize(
+                    .label=${this.hass.localize(
                       "ui.dialogs.helper_settings.input_select.remove_option"
                     )}
                     @click=${this._removeOption}
-                    icon="hass:delete"
+                    .path=${mdiDelete}
                   ></ha-icon-button>
                 </paper-item>
               `

src/panels/config/info/system-health-card.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiContentCopy } from "@mdi/js";
@@ -12,7 +11,7 @@ import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
-import "../../../components/ha-svg-icon";
+import "../../../components/ha-icon-button";
 import { domainToName } from "../../../data/integration";
 import {
   subscribeSystemHealthInfo,
@@ -150,9 +149,11 @@ class SystemHealthCard extends LitElement {
             slot="toolbar-icon"
             @action=${this._copyInfo}
           >
-            <mwc-icon-button slot="trigger" alt="menu">
+            <ha-icon-button
-              <ha-svg-icon .path=${mdiContentCopy}></ha-svg-icon>
+              slot="trigger"
-            </mwc-icon-button>
+              .label=${this.hass.localize("ui.panel.config.info.copy_menu")}
+              .path=${mdiContentCopy}
+            ></ha-icon-button>
             <mwc-list-item>
               ${this.hass.localize("ui.panel.config.info.copy_raw")}
             </mwc-list-item>

src/panels/config/integrations/ha-config-integrations.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiFilterVariant, mdiPlus } from "@mdi/js";
@@ -25,6 +24,7 @@ import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-checkbox";
 import "../../../components/ha-fab";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
@@ -290,13 +290,12 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
       slot=${ifDefined(this.narrow ? "toolbar-icon" : undefined)}
       @action=${this._handleMenuAction}
     >
-      <mwc-icon-button
+      <ha-icon-button
-        .title=${this.hass.localize("ui.common.menu")}
-        .label=${this.hass.localize("ui.common.overflow_menu")}
         slot="trigger"
+        .label=${this.hass.localize("ui.common.menu")}
+        .path=${mdiFilterVariant}
       >
-        <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
+      </ha-icon-button>
-      </mwc-icon-button>
       <mwc-list-item graphic="control" .selected=${this._showIgnored}>
         <ha-checkbox slot="graphic" .checked=${this._showIgnored}></ha-checkbox>
         ${this.hass.localize(
@@ -326,6 +325,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           ? html`
               <div slot="header">
                 <search-input
+                  .hass=${this.hass}
                   .filter=${this._filter}
                   class="header"
                   no-label-float
@@ -341,6 +341,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           : html`
               <div class="search">
                 <search-input
+                  .hass=${this.hass}
                   no-label-float
                   no-underline
                   .filter=${this._filter}

src/panels/config/integrations/ha-integration-card.ts

@@ -1,7 +1,12 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
-import { mdiAlertCircle, mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
+import {
+  mdiAlertCircle,
+  mdiChevronLeft,
+  mdiDotsVertical,
+  mdiOpenInNew,
+} from "@mdi/js";
 import "@polymer/paper-item";
 import "@polymer/paper-listbox";
 import "@polymer/paper-tooltip/paper-tooltip";
@@ -12,6 +17,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-svg-icon";
 import {
@@ -112,8 +118,9 @@ export class HaIntegrationCard extends LitElement {
             ? html`
                 <div class="back-btn" slot="above-header">
                   <ha-icon-button
-                    icon="hass:chevron-left"
+                    .path=${mdiChevronLeft}
                     @click=${this._back}
+                    .label=${this.hass.localize("ui.common.back")}
                   ></ha-icon-button>
                 </div>
               `
@@ -291,13 +298,11 @@ export class HaIntegrationCard extends LitElement {
             : ""}
         </div>
         <ha-button-menu corner="BOTTOM_START">
-          <mwc-icon-button
+          <ha-icon-button
-            .title=${this.hass.localize("ui.common.menu")}
-            .label=${this.hass.localize("ui.common.overflow_menu")}
             slot="trigger"
-          >
+            .label=${this.hass.localize("ui.common.menu")}
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+            .path=${mdiDotsVertical}
-          </mwc-icon-button>
+          ></ha-icon-button>
           <mwc-list-item @request-selected=${this._handleRename}>
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.rename"

src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts

@@ -101,6 +101,7 @@ class DialogZHADeviceChildren extends LitElement {
               active
             ></ha-circular-progress>`
           : html`<ha-data-table
+              .hass=${this.hass}
               .columns=${this._columns}
               .data=${this._deviceChildren(this._device, this._devices)}
               auto-height

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -78,7 +79,8 @@ export class ZHAClusterAttributes extends LitElement {
           <ha-icon-button
             class="toggle-help-icon"
             @click=${this._onHelpTap}
-            icon="hass:help-circle"
+            .path=${mdiHelpCircle}
+            .label=${this.hass!.localize("ui.common.help")}
           >
           </ha-icon-button>
         </div>

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -1,3 +1,4 @@
+import { mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
@@ -72,7 +73,8 @@ export class ZHAClusterCommands extends LitElement {
           <ha-icon-button
             class="toggle-help-icon"
             @click=${this._onHelpTap}
-            icon="hass:help-circle"
+            .path=${mdiHelpCircle}
+            .label=${this.hass!.localize("ui.common.help")}
           >
           </ha-icon-button>
         </div>

src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts

@@ -76,6 +76,7 @@ export class ZHAClustersDataTable extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-data-table
+        .hass=${this.hass}
         .columns=${this._columns(this.narrow)}
         .data=${this._clusters(this.clusters)}
         .id=${"cluster_id"}

src/panels/config/integrations/integration-panels/zha/zha-clusters.ts

@@ -1,3 +1,4 @@
+import { mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
@@ -67,7 +68,8 @@ export class ZHAClusters extends LitElement {
           <ha-icon-button
             class="toggle-help-icon"
             @click=${this._onHelpTap}
-            icon="hass:help-circle"
+            .path=${mdiHelpCircle}
+            .label=${this.hass!.localize("ui.common.help")}
           >
           </ha-icon-button>
         </div>

src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button/mwc-button";
+import { mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
@@ -52,7 +53,8 @@ export class ZHADeviceBindingControl extends LitElement {
           <ha-icon-button
             class="toggle-help-icon"
             @click=${this._onHelpTap}
-            icon="hass:help-circle"
+            .path=${mdiHelpCircle}
+            .label=${this.hass!.localize("ui.common.help")}
           >
           </ha-icon-button>
         </div>

src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts

@@ -137,6 +137,7 @@ export class ZHADeviceEndpointDataTable extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-data-table
+        .hass=${this.hass}
         .columns=${this._columns(this.narrow)}
         .data=${this._deviceEndpoints(this.deviceEndpoints)}
         .selectable=${this.selectable}