diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 2209d54f59..6419406adf 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -1,4 +1,5 @@
 import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import { mdiArrowDown, mdiArrowUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import {
   css,
@@ -27,7 +28,7 @@ import { nextRender } from "../../common/util/render-status";
 import { haStyleScrollbar } from "../../resources/styles";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
-import "../ha-icon";
+import "../ha-svg-icon";
 import { filterData, sortData } from "./sort-filter";
 
 declare global {
@@ -311,11 +312,11 @@ export class HaDataTable extends LitElement {
                 >
                   ${column.sortable
                     ? html`
-                        <ha-icon
-                          .icon=${sorted && this._sortDirection === "desc"
-                            ? "hass:arrow-down"
-                            : "hass:arrow-up"}
-                        ></ha-icon>
+                        <ha-svg-icon
+                          .path=${sorted && this._sortDirection === "desc"
+                            ? mdiArrowDown
+                            : mdiArrowUp}
+                        ></ha-svg-icon>
                       `
                     : ""}
                   <span>${column.title}</span>
@@ -863,14 +864,14 @@ export class HaDataTable extends LitElement {
         :host([dir="rtl"]) .mdc-data-table__header-cell > * {
           transition: right 0.2s ease;
         }
-        .mdc-data-table__header-cell ha-icon {
+        .mdc-data-table__header-cell ha-svg-icon {
           top: -3px;
           position: absolute;
         }
-        .mdc-data-table__header-cell.not-sorted ha-icon {
+        .mdc-data-table__header-cell.not-sorted ha-svg-icon {
           left: -20px;
         }
-        :host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-icon {
+        :host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-svg-icon {
           right: -20px;
         }
         .mdc-data-table__header-cell.sortable:not(.not-sorted) span,
@@ -886,16 +887,16 @@ export class HaDataTable extends LitElement {
           left: auto;
           right: 24px;
         }
-        .mdc-data-table__header-cell.sortable:not(.not-sorted) ha-icon,
-        .mdc-data-table__header-cell.sortable:hover.not-sorted ha-icon {
+        .mdc-data-table__header-cell.sortable:not(.not-sorted) ha-svg-icon,
+        .mdc-data-table__header-cell.sortable:hover.not-sorted ha-svg-icon {
           left: 12px;
         }
         :host([dir="rtl"])
           .mdc-data-table__header-cell.sortable:not(.not-sorted)
-          ha-icon,
+          ha-svg-icon,
         :host([dir="rtl"])
           .mdc-data-table__header-cell.sortable:hover.not-sorted
-          ha-icon {
+          ha-svg-icon {
           left: auto;
           right: 12px;
         }
diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
index 0c8dce7edc..bbb934b981 100644
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@@ -9,7 +9,6 @@ import {
   unsafeCSS,
 } from "lit";
 import { customElement, property } from "lit/decorators";
-import "./ha-icon";
 
 declare global {
   // for fire event
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index b2963d6c3a..4993329563 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -4,7 +4,8 @@ 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 "./ha-icon-button";
+import "@material/mwc-icon-button/mwc-icon-button";
+import "./ha-svg-icon";
 
 export const createCloseHeading = (
   hass: HomeAssistant,
diff --git a/src/components/ha-form/ha-form-multi_select.ts b/src/components/ha-form/ha-form-multi_select.ts
index 8416b5af75..b947e5ac79 100644
--- a/src/components/ha-form/ha-form-multi_select.ts
+++ b/src/components/ha-form/ha-form-multi_select.ts
@@ -1,3 +1,4 @@
+import { mdiMenuDown } from "@mdi/js";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
@@ -7,7 +8,7 @@ import "@polymer/paper-ripple/paper-ripple";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-icon";
+import "../ha-svg-icon";
 import {
   HaFormElement,
   HaFormMultiSelectData,
@@ -56,11 +57,11 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
             input-aria-haspopup="listbox"
             autocomplete="off"
           >
-            <ha-icon
-              icon="paper-dropdown-menu:arrow-drop-down"
+            <ha-svg-icon
+              .path=${mdiMenuDown}
               suffix
               slot="suffix"
-            ></ha-icon>
+            ></ha-svg-icon>
           </paper-input>
         </div>
         <paper-listbox
diff --git a/src/components/ha-tab.ts b/src/components/ha-tab.ts
index fe391171ba..5b326f61fb 100644
--- a/src/components/ha-tab.ts
+++ b/src/components/ha-tab.ts
@@ -10,8 +10,6 @@ import {
   state,
 } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
-import "./ha-icon";
-import "./ha-svg-icon";
 
 @customElement("ha-tab")
 export class HaTab extends LitElement {
diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts
index 837f4a64b8..b12f1f20fd 100644
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@@ -10,7 +10,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
 import { fetchUsers, User } from "../../data/user";
 import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
 import "./ha-user-badge";
 
 class HaUserPicker extends LitElement {
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 1a49529e17..bbdc54dca5 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -279,7 +279,7 @@ export class HaTabsSubpageDataTable extends LitElement {
         margin-left: 4px;
         font-size: 14px;
       }
-      .active-filters ha-icon {
+      .active-filters ha-svg-icon {
         color: var(--primary-color);
       }
       .active-filters mwc-button {
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 431713b6f9..14767f4a0e 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -14,7 +14,6 @@ import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import { LocalizeFunc } from "../common/translations/localize";
 import { computeRTL } from "../common/util/compute_rtl";
-import "../components/ha-icon";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import "../components/ha-svg-icon";
@@ -28,7 +27,6 @@ export interface PageNavigation {
   name?: string;
   core?: boolean;
   advancedOnly?: boolean;
-  icon?: string;
   iconPath?: string;
   info?: any;
 }
@@ -98,7 +96,7 @@ class HassTabsSubpage extends LitElement {
                       slot="icon"
                       .path=${page.iconPath}
                     ></ha-svg-icon>`
-                  : html`<ha-icon slot="icon" .icon=${page.icon}></ha-icon>`}
+                  : ""}
               </ha-tab>
             </a>
           `