Split up mdi icons (#4379)

2020-05-05 16:40:11 +02:00 · 2020-05-05 16:40:11 +02:00 · 0a92c28bac
parent d419547463
commit 0a92c28bac
168 changed files with 1102 additions and 1048 deletions
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@ -35,7 +35,7 @@ jobs:
        env:
          CI: true
      - name: Build icons
-        run: ./node_modules/.bin/gulp gen-icons-hassio gen-icons-mdi gen-icons-app
+        run: ./node_modules/.bin/gulp gen-icons-json
      - name: Build translations
        run: ./node_modules/.bin/gulp build-translations
      - name: Run eslint
--- a/build-scripts/gulp/app.js
+++ b/build-scripts/gulp/app.js
@ -5,7 +5,7 @@ const envVars = require("../env");

 require("./clean.js");
 require("./translations.js");
-require("./gen-icons.js");
+require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./compress.js");
 require("./webpack.js");
@ -21,7 +21,7 @@ gulp.task(
    "clean",
    gulp.parallel(
      "gen-service-worker-dev",
-      gulp.parallel("gen-icons-app", "gen-icons-mdi"),
+      "gen-icons-json",
      "gen-pages-dev",
      "gen-index-app-dev",
      "build-translations"
@ -38,7 +38,7 @@ gulp.task(
      process.env.NODE_ENV = "production";
    },
    "clean",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations"),
    "copy-static",
    "webpack-prod-app",
    ...// Don't compress running tests
--- a/build-scripts/gulp/cast.js
+++ b/build-scripts/gulp/cast.js
@ -2,7 +2,6 @@ const gulp = require("gulp");

 require("./clean.js");
 require("./translations.js");
-require("./gen-icons.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
@ -17,12 +16,7 @@ gulp.task(
    },
    "clean-cast",
    "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-app",
-      "gen-icons-mdi",
-      "gen-index-cast-dev",
-      "build-translations"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations"),
    "copy-static-cast",
    "webpack-dev-server-cast"
  )
@ -36,7 +30,7 @@ gulp.task(
    },
    "clean-cast",
    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations"),
    "copy-static-cast",
    "webpack-prod-cast",
    "gen-index-cast-prod"
--- a/build-scripts/gulp/demo.js
+++ b/build-scripts/gulp/demo.js
@ -3,7 +3,7 @@ const gulp = require("gulp");

 require("./clean.js");
 require("./translations.js");
-require("./gen-icons.js");
+require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
@ -17,13 +17,7 @@ gulp.task(
    },
    "clean-demo",
    "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-app",
-      "gen-icons-mdi",
-      "gen-icons-demo",
-      "gen-index-demo-dev",
-      "build-translations"
-    ),
+    gulp.parallel("gen-icons-json", "gen-index-demo-dev", "build-translations"),
    "copy-static-demo",
    "webpack-dev-server-demo"
  )
@ -38,12 +32,7 @@ gulp.task(
    "clean-demo",
    // Cast needs to be backwards compatible and older HA has no translations
    "translations-enable-merge-backend",
-    gulp.parallel(
-      "gen-icons-app",
-      "gen-icons-mdi",
-      "gen-icons-demo",
-      "build-translations"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations"),
    "copy-static-demo",
    "webpack-prod-demo",
    "gen-index-demo-prod"
--- a/build-scripts/gulp/entry-html.js
+++ b/build-scripts/gulp/entry-html.js
@ -47,11 +47,9 @@ gulp.task("gen-pages-dev", (done) => {
  for (const page of PAGES) {
    const content = renderTemplate(page, {
      latestPageJS: `/frontend_latest/${page}.js`,
-      latestHassIconsJS: "/frontend_latest/hass-icons.js",

      es5Compatibility: "/frontend_es5/compatibility.js",
      es5PageJS: `/frontend_es5/${page}.js`,
-      es5HassIconsJS: "/frontend_es5/hass-icons.js",
    });

    fs.outputFileSync(path.resolve(config.root, `${page}.html`), content);
@ -66,11 +64,9 @@ gulp.task("gen-pages-prod", (done) => {
  for (const page of PAGES) {
    const content = renderTemplate(page, {
      latestPageJS: latestManifest[`${page}.js`],
-      latestHassIconsJS: latestManifest["hass-icons.js"],

      es5Compatibility: es5Manifest["compatibility.js"],
      es5PageJS: es5Manifest[`${page}.js`],
-      es5HassIconsJS: es5Manifest["hass-icons.js"],
    });

    fs.outputFileSync(
@ -88,13 +84,11 @@ gulp.task("gen-index-app-dev", (done) => {
    latestAppJS: "/frontend_latest/app.js",
    latestCoreJS: "/frontend_latest/core.js",
    latestCustomPanelJS: "/frontend_latest/custom-panel.js",
-    latestHassIconsJS: "/frontend_latest/hass-icons.js",

    es5Compatibility: "/frontend_es5/compatibility.js",
    es5AppJS: "/frontend_es5/app.js",
    es5CoreJS: "/frontend_es5/core.js",
    es5CustomPanelJS: "/frontend_es5/custom-panel.js",
-    es5HassIconsJS: "/frontend_es5/hass-icons.js",
  }).replace(/#THEMEC/g, "{{ theme_color }}");

  fs.outputFileSync(path.resolve(config.root, "index.html"), content);
@ -108,13 +102,11 @@ gulp.task("gen-index-app-prod", (done) => {
    latestAppJS: latestManifest["app.js"],
    latestCoreJS: latestManifest["core.js"],
    latestCustomPanelJS: latestManifest["custom-panel.js"],
-    latestHassIconsJS: latestManifest["hass-icons.js"],

    es5Compatibility: es5Manifest["compatibility.js"],
    es5AppJS: es5Manifest["app.js"],
    es5CoreJS: es5Manifest["core.js"],
    es5CustomPanelJS: es5Manifest["custom-panel.js"],
-    es5HassIconsJS: es5Manifest["hass-icons.js"],
  });
  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");

--- a/build-scripts/gulp/gallery.js
+++ b/build-scripts/gulp/gallery.js
@ -3,7 +3,7 @@ const gulp = require("gulp");

 require("./clean.js");
 require("./translations.js");
-require("./gen-icons.js");
+require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./webpack.js");
 require("./service-worker.js");
@ -17,7 +17,7 @@ gulp.task(
    },
    "clean-gallery",
    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations"),
    "copy-static-gallery",
    "gen-index-gallery-dev",
    "webpack-dev-server-gallery"
@ -32,7 +32,7 @@ gulp.task(
    },
    "clean-gallery",
    "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations"),
    "copy-static-gallery",
    "webpack-prod-gallery",
    "gen-index-gallery-prod"
--- a/build-scripts/gulp/gather-static.js
+++ b/build-scripts/gulp/gather-static.js
@ -26,6 +26,13 @@ function copyTranslations(staticDir) {
  );
 }

+function copyMdiIcons(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // MDI icons output
+  fs.copySync(polyPath("build/mdi"), staticPath("mdi"));
+}
+
 function copyPolyfills(staticDir) {
  const staticPath = genStaticPath(staticDir);

@ -80,6 +87,7 @@ gulp.task("copy-static", (done) => {
  copyPolyfills(staticDir);
  copyFonts(staticDir);
  copyTranslations(staticDir);
+  copyMdiIcons(staticDir);

  // Panel assets
  copyFileDir(
@ -103,6 +111,7 @@ gulp.task("copy-static-demo", (done) => {
  copyMapPanel(paths.demo_static);
  copyFonts(paths.demo_static);
  copyTranslations(paths.demo_static);
+  copyMdiIcons(paths.demo_static);
  done();
 });

@ -115,6 +124,7 @@ gulp.task("copy-static-cast", (done) => {
  copyMapPanel(paths.cast_static);
  copyFonts(paths.cast_static);
  copyTranslations(paths.cast_static);
+  copyMdiIcons(paths.cast_static);
  done();
 });

@ -127,5 +137,6 @@ gulp.task("copy-static-gallery", (done) => {
  copyMapPanel(paths.gallery_static);
  copyFonts(paths.gallery_static);
  copyTranslations(paths.gallery_static);
+  copyMdiIcons(paths.gallery_static);
  done();
 });
--- a/build-scripts/gulp/gen-icons-json.js
+++ b/build-scripts/gulp/gen-icons-json.js
@ -0,0 +1,109 @@
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs");
+const hash = require("object-hash");
+
+const ICON_PACKAGE_PATH = path.resolve(
+  __dirname,
+  "../../node_modules/@mdi/svg/"
+);
+const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
+const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
+const OUTPUT_DIR = path.resolve(__dirname, "../../build/mdi");
+
+const encoding = "utf8";
+
+const getMeta = () => {
+  const file = fs.readFileSync(META_PATH, { encoding });
+  const meta = JSON.parse(file);
+  return meta.map((icon) => {
+    const svg = fs.readFileSync(`${ICON_PATH}/${icon.name}.svg`, {
+      encoding,
+    });
+    return { path: svg.match(/ d="([^"]+)"/)[1], name: icon.name };
+  });
+};
+
+const splitBySize = (meta) => {
+  const chunks = [];
+  const CHUNK_SIZE = 100000;
+
+  let curSize = 0;
+  let startKey;
+  let icons = [];
+
+  Object.values(meta).forEach((icon) => {
+    if (startKey === undefined) {
+      startKey = icon.name;
+    }
+    curSize += icon.path.length;
+    icons.push(icon);
+    if (curSize > CHUNK_SIZE) {
+      chunks.push({
+        startKey,
+        endKey: icon.name,
+        icons,
+      });
+      curSize = 0;
+      startKey = undefined;
+      icons = [];
+    }
+  });
+
+  chunks.push({
+    startKey,
+    icons,
+  });
+
+  return chunks;
+};
+
+const findDifferentiator = (curString, prevString) => {
+  for (let i = 0; i < curString.length; i++) {
+    if (curString[i] !== prevString[i]) {
+      return curString.substring(0, i + 1);
+    }
+  }
+  console.error("Cannot find differentiator", curString, prevString);
+  return undefined;
+};
+
+gulp.task("gen-icons-json", (done) => {
+  const meta = getMeta();
+  const split = splitBySize(meta);
+
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  }
+  const manifest = [];
+
+  let lastEnd;
+  split.forEach((chunk) => {
+    let startKey;
+    if (lastEnd === undefined) {
+      chunk.startKey = undefined;
+      startKey = undefined;
+    } else {
+      startKey = findDifferentiator(chunk.startKey, lastEnd);
+    }
+    lastEnd = chunk.endKey;
+
+    const output = {};
+    chunk.icons.forEach((icon) => {
+      output[icon.name] = icon.path;
+    });
+    const filename = hash(output);
+    manifest.push({ start: startKey, file: filename });
+    fs.writeFileSync(
+      path.resolve(OUTPUT_DIR, `${filename}.json`),
+      JSON.stringify(output)
+    );
+  });
+
+  fs.writeFileSync(
+    path.resolve(OUTPUT_DIR, "iconMetadata.json"),
+    JSON.stringify(manifest)
+  );
+
+  done();
+});
--- a/build-scripts/gulp/gen-icons.js
+++ b/build-scripts/gulp/gen-icons.js
@ -1,127 +0,0 @@
-const gulp = require("gulp");
-const path = require("path");
-const fs = require("fs");
-const paths = require("../paths");
-const { mapFiles } = require("../util");
-
-const ICON_PACKAGE_PATH = path.resolve(
-  __dirname,
-  "../../node_modules/@mdi/svg/"
-);
-const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
-const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
-const OUTPUT_DIR = path.resolve(__dirname, "../../build");
-const MDI_OUTPUT_PATH = path.resolve(OUTPUT_DIR, "mdi.html");
-const HASS_OUTPUT_PATH = path.resolve(OUTPUT_DIR, "hass-icons.html");
-
-const BUILT_IN_PANEL_ICONS = [
-  "calendar", // Calendar
-  "settings", // Config
-  "home-assistant", // Hass.io
-  "poll-box", // History panel
-  "format-list-bulleted-type", // Logbook
-  "mailbox", // Mailbox
-  "tooltip-account", // Map
-  "cart", // Shopping List
-  "hammer", // developer-tools
-];
-
-// Given an icon name, load the SVG file
-function loadIcon(name) {
-  const iconPath = path.resolve(ICON_PATH, `${name}.svg`);
-  try {
-    return fs.readFileSync(iconPath, "utf-8");
-  } catch (err) {
-    return null;
-  }
-}
-
-// Given an SVG file, convert it to an iron-iconset-svg definition
-function transformXMLtoPolymer(name, xml) {
-  const start = xml.indexOf("><path") + 1;
-  const end = xml.length - start - 6;
-  const pth = xml.substr(start, end);
-  return `<g id="${name}">${pth}</g>`;
-}
-
-// Given an iconset name and icon names, generate a polymer iconset
-function generateIconset(iconsetName, iconNames) {
-  const iconDefs = Array.from(iconNames)
-    .map((name) => {
-      const iconDef = loadIcon(name);
-      if (!iconDef) {
-        throw new Error(`Unknown icon referenced: ${name}`);
-      }
-      return transformXMLtoPolymer(name, iconDef);
-    })
-    .join("");
-  return `<ha-iconset-svg name="${iconsetName}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
-}
-
-// Find all icons used by the project.
-function findIcons(searchPath, iconsetName) {
-  const iconRegex = new RegExp(`${iconsetName}:[\\w-]+`, "g");
-  const icons = new Set();
-  function processFile(filename) {
-    const content = fs.readFileSync(filename);
-    let match;
-    // eslint-disable-next-line
-    while ((match = iconRegex.exec(content))) {
-      // strip off "hass:" and add to set
-      icons.add(match[0].substr(iconsetName.length + 1));
-    }
-  }
-  mapFiles(searchPath, ".js", processFile);
-  mapFiles(searchPath, ".ts", processFile);
-  return icons;
-}
-
-gulp.task("gen-icons-mdi", (done) => {
-  const meta = JSON.parse(
-    fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), "UTF-8")
-  );
-  const iconNames = meta.map((iconInfo) => iconInfo.name);
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR);
-  }
-  fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset("mdi", iconNames));
-  done();
-});
-
-gulp.task("gen-icons-app", (done) => {
-  const iconNames = findIcons("./src", "hass");
-  BUILT_IN_PANEL_ICONS.forEach((name) => iconNames.add(name));
-  if (!fs.existsSync(OUTPUT_DIR)) {
-    fs.mkdirSync(OUTPUT_DIR);
-  }
-  fs.writeFileSync(HASS_OUTPUT_PATH, generateIconset("hass", iconNames));
-  done();
-});
-
-gulp.task("gen-icons-demo", (done) => {
-  const iconNames = findIcons(path.resolve(paths.demo_dir, "./src"), "hademo");
-  fs.writeFileSync(
-    path.resolve(paths.demo_dir, "hademo-icons.html"),
-    generateIconset("hademo", iconNames)
-  );
-  done();
-});
-
-gulp.task("gen-icons-hassio", (done) => {
-  const iconNames = findIcons(
-    path.resolve(paths.hassio_dir, "./src"),
-    "hassio"
-  );
-  // Find hassio icons inside HA main repo.
-  for (const item of findIcons(
-    path.resolve(paths.polymer_dir, "./src"),
-    "hassio"
-  )) {
-    iconNames.add(item);
-  }
-  fs.writeFileSync(
-    path.resolve(paths.hassio_dir, "hassio-icons.html"),
-    generateIconset("hassio", iconNames)
-  );
-  done();
-});
--- a/build-scripts/gulp/hassio.js
+++ b/build-scripts/gulp/hassio.js
@ -3,7 +3,7 @@ const gulp = require("gulp");
 const envVars = require("../env");

 require("./clean.js");
-require("./gen-icons.js");
+require("./gen-icons-json.js");
 require("./webpack.js");
 require("./compress.js");

@ -14,7 +14,6 @@ gulp.task(
      process.env.NODE_ENV = "development";
    },
    "clean-hassio",
-    gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
    "webpack-watch-hassio"
  )
 );
@ -26,7 +25,6 @@ gulp.task(
      process.env.NODE_ENV = "production";
    },
    "clean-hassio",
-    gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
    "webpack-prod-hassio",
    ...// Don't compress running tests
    (envVars.isTravis() ? [] : ["compress-hassio"])
--- a/build-scripts/webpack.js
+++ b/build-scripts/webpack.js
@ -140,7 +140,6 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
      core: "./src/entrypoints/core.ts",
      compatibility: "./src/entrypoints/compatibility.ts",
      "custom-panel": "./src/entrypoints/custom-panel.ts",
-      "hass-icons": "./src/entrypoints/hass-icons.ts",
    },
    outputRoot: paths.root,
    isProdBuild,
--- a/cast/src/launcher/entrypoint.ts
+++ b/cast/src/launcher/entrypoint.ts
@ -1,5 +1,3 @@
-import "../../../src/components/ha-iconset-svg";
 import "../../../src/resources/ha-style";
-import "../../../src/resources/hass-icons";
 import "../../../src/resources/roboto";
 import "./layout/hc-connect";
--- a/cast/src/launcher/layout/hc-cast.ts
+++ b/cast/src/launcher/layout/hc-cast.ts
@ -1,4 +1,3 @@
-import "@polymer/iron-icon";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
@ -83,7 +82,7 @@ class HcCast extends LitElement {
          ? html`
              <p class="center-item">
                <mwc-button raised @click=${this._handleLaunch}>
-                  <iron-icon icon="hass:cast"></iron-icon>
+                  <ha-icon icon="hass:cast"></ha-icon>
                  Start Casting
                </mwc-button>
              </p>
@ -121,7 +120,7 @@ class HcCast extends LitElement {
          ${this.castManager.status
            ? html`
                <mwc-button @click=${this._handleLaunch}>
-                  <iron-icon icon="hass:cast-connected"></iron-icon>
+                  <ha-icon icon="hass:cast-connected"></ha-icon>
                  Manage
                </mwc-button>
              `
@ -243,7 +242,7 @@ class HcCast extends LitElement {
        color: var(--secondary-text-color);
      }

-      mwc-button iron-icon {
+      mwc-button ha-icon {
        margin-right: 8px;
        height: 18px;
      }
--- a/cast/src/launcher/layout/hc-connect.ts
+++ b/cast/src/launcher/layout/hc-connect.ts
@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/iron-icon";
 import "@polymer/paper-input/paper-input";
 import {
  Auth,
@ -27,6 +26,7 @@ import {
  loadTokens,
  saveTokens,
 } from "../../../../src/common/auth/token_storage";
+import "../../../../src/components/ha-icon";
 import "../../../../src/layouts/loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
@ -136,11 +136,11 @@ export class HcConnect extends LitElement {
          <div class="card-actions">
            <mwc-button @click=${this._handleDemo}>
              Show Demo
-              <iron-icon
+              <ha-icon
                .icon=${this.castManager.castState === "CONNECTED"
                  ? "hass:cast-connected"
                  : "hass:cast"}
-              ></iron-icon>
+              ></ha-icon>
            </mwc-button>
            <div class="spacer"></div>
            <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
@ -316,7 +316,7 @@ export class HcConnect extends LitElement {
        color: darkred;
      }

-      mwc-button iron-icon {
+      mwc-button ha-icon {
        margin-left: 8px;
      }

--- a/cast/src/receiver/second-load.ts
+++ b/cast/src/receiver/second-load.ts
@ -1,5 +1,3 @@
 import "web-animations-js/web-animations-next-lite.min";
-import "../../../src/components/ha-iconset-svg";
-import "../../../src/resources/hass-icons";
 import "../../../src/resources/roboto";
 import "./layout/hc-lovelace";
--- a/demo/src/configs/teachingbirds/lovelace.ts
+++ b/demo/src/configs/teachingbirds/lovelace.ts
@ -63,8 +63,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                  elements: [
                    {
                      style: {
-                        "--iron-icon-width": "100px",
-                        "--iron-icon-height": "100px",
+                        "--mdc-icon-size": "100px",
                        top: "50%",
                        left: "50%",
                      },
--- a/demo/src/entrypoint.ts
+++ b/demo/src/entrypoint.ts
@ -1,12 +1,9 @@
 import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
-import "../../src/components/ha-iconset-svg";
 import "../../src/resources/ha-style";
-import "../../src/resources/hass-icons";
 import "../../src/resources/roboto";
 import "./ha-demo";
-import "./resources/hademo-icons";

 /* polyfill for paper-dropdown */
 setTimeout(() => {
--- a/demo/src/resources/hademo-icons.js
+++ b/demo/src/resources/hademo-icons.js
@ -1,7 +0,0 @@
-import "../../../src/components/ha-iconset-svg";
-import iconSetContent from "../../hademo-icons.html";
-
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-documentContainer.innerHTML = iconSetContent;
-document.head.appendChild(documentContainer.content);
--- a/gallery/src/demos/demo-hui-picture-elements-card.ts
+++ b/gallery/src/demos/demo-hui-picture-elements-card.ts
@ -50,10 +50,9 @@ const CONFIGS = [
        top: 12%
        left: 6%
        transform: rotate(-60deg) scaleX(-1)
-        --iron-icon-height: 30px
-        --iron-icon-width: 30px
-        --iron-icon-stroke-color: black
-        --iron-icon-fill-color: rgba(50, 50, 50, .75)
+        --mdc-icon-size: 30px
+        --mdc-icon-stroke-color: black
+        --mdc-icon-fill-color: rgba(50, 50, 50, .75)
    - type: image
      entity: light.bed_light
      tap_action:
@ -99,10 +98,9 @@ const CONFIGS = [
        top: 12%
        left: 6%
        transform: rotate(-60deg) scaleX(-1)
-        --iron-icon-height: 30px
-        --iron-icon-width: 30px
-        --iron-icon-stroke-color: black
-        --iron-icon-fill-color: rgba(50, 50, 50, .75)
+        --mdc-icon-size: 30px
+        --mdc-icon-stroke-color: black
+        --mdc-icon-fill-color: rgba(50, 50, 50, .75)
    - type: image
      entity: light.bed_light
      tap_action:
--- a/gallery/src/entrypoint.js
+++ b/gallery/src/entrypoint.js
@ -1,9 +1,7 @@
 import "@polymer/paper-styles/typography";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
-import "../../src/components/ha-iconset-svg";
 import "../../src/resources/ha-style";
-import "../../src/resources/hass-icons";
 import "../../src/resources/roboto";
 import "./ha-gallery";

--- a/gallery/src/ha-gallery.js
+++ b/gallery/src/ha-gallery.js
@ -1,8 +1,8 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../src/components/ha-icon-button";
+import "../../src/components/ha-icon";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -28,7 +28,7 @@ class HaGallery extends PolymerElement {
      app-header-layout {
        min-height: 100vh;
      }
-      paper-icon-button.invisible {
+      ha-icon-button.invisible {
        visibility: hidden;
      }

@ -67,11 +67,11 @@ class HaGallery extends PolymerElement {
      <app-header-layout>
        <app-header slot="header" fixed>
          <app-toolbar>
-            <paper-icon-button
+            <ha-icon-button
              icon="hass:arrow-left"
              on-click="_backTapped"
              class$='[[_computeHeaderButtonClass(_demo)]]'
-            ></paper-icon-button>
+            ></ha-icon-button>
            <div main-title>[[_withDefault(_demo, "Home Assistant Gallery")]]</div>
          </app-toolbar>
        </app-header>
@ -98,7 +98,7 @@ class HaGallery extends PolymerElement {
                  <a href='#[[item]]'>
                    <paper-item>
                      <paper-item-body>{{ item }}</paper-item-body>
-                      <iron-icon icon="hass:chevron-right"></iron-icon>
+                      <ha-icon icon="hass:chevron-right"></ha-icon>
                    </paper-item>
                  </a>
                </template>
@ -114,7 +114,7 @@ class HaGallery extends PolymerElement {
                  <a href='#[[item]]'>
                    <paper-item>
                      <paper-item-body>{{ item }}</paper-item-body>
-                      <iron-icon icon="hass:chevron-right"></iron-icon>
+                      <ha-icon icon="hass:chevron-right"></ha-icon>
                    </paper-item>
                  </a>
                </template>
@ -130,7 +130,7 @@ class HaGallery extends PolymerElement {
                  <a href='#[[item]]'>
                    <paper-item>
                      <paper-item-body>{{ item }}</paper-item-body>
-                      <iron-icon icon="hass:chevron-right"></iron-icon>
+                      <ha-icon icon="hass:chevron-right"></ha-icon>
                    </paper-item>
                  </a>
                </template>
--- a/hassio/.gitignore
+++ b/hassio/.gitignore
@ -1 +0,0 @@
-hassio-icons.html
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@ -92,12 +92,12 @@ class HassioAddonStore extends LitElement {
        .tabs=${supervisorTabs}
      >
        <span slot="header">Add-on store</span>
-        <paper-icon-button
+        <ha-icon-button
          icon="hassio:reload"
          slot="toolbar-icon"
          aria-label="Reload add-ons"
          @click=${this.refreshData}
-        ></paper-icon-button>
+        ></ha-icon-button>

        ${repos.length === 0
          ? html`<loading-screen></loading-screen>`
@ -150,9 +150,6 @@ class HassioAddonStore extends LitElement {
      hassio-addon-repository {
        margin-top: 24px;
      }
-      hassio-search-input {
-        --iron-icon-fill-color: var(--primary-text-color);
-      }
    `;
  }
 }
--- a/hassio/src/addon-store/hassio-repositories-editor.ts
+++ b/hassio/src/addon-store/hassio-repositories-editor.ts
@ -1,4 +1,3 @@
-import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import {
@ -19,6 +18,7 @@ import { PolymerChangedEvent } from "../../../src/polymer-types";
 import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-card-content";
 import { hassioStyle } from "../resources/hassio-style";
+import "../../../src/components/ha-icon";

@customElement("hassio-repositories-editor")
 class HassioRepositoriesEditor extends LitElement {
@ -76,7 +76,7 @@ class HassioRepositoriesEditor extends LitElement {

          <paper-card>
            <div class="card-content add">
-              <iron-icon icon="hassio:github-circle"></iron-icon>
+              <ha-icon icon="hassio:github-circle"></ha-icon>
              <paper-input
                label="Add new repository by URL"
                .value=${this._repoUrl}
@ -130,7 +130,7 @@ class HassioRepositoriesEditor extends LitElement {
        .add {
          padding: 12px 16px;
        }
-        iron-icon {
+        ha-icon {
          color: var(--secondary-text-color);
          margin-right: 16px;
          display: inline-block;
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../../src/components/ha-icon-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
@ -20,6 +19,7 @@ import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-label-badge";
 import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-switch";
+import "../../../../src/components/ha-icon";
 import {
  fetchHassioAddonChangelog,
  HassioAddonDetails,
@ -178,18 +178,18 @@ class HassioAddonInfo extends LitElement {
                    ${this.addon.version}
                    ${this._computeIsRunning
                      ? html`
-                          <iron-icon
+                          <ha-icon
                            title="Add-on is running"
                            class="running"
                            icon="hassio:circle"
-                          ></iron-icon>
+                          ></ha-icon>
                        `
                      : html`
-                          <iron-icon
+                          <ha-icon
                            title="Add-on is stopped"
                            class="stopped"
                            icon="hassio:circle"
-                          ></iron-icon>
+                          ></ha-icon>
                        `}
                  `
                : html` ${this.addon.version_latest} `}
@ -387,7 +387,7 @@ class HassioAddonInfo extends LitElement {
                        <div>
                          Protection mode
                          <span>
-                            <iron-icon icon="hassio:information"></iron-icon>
+                            <ha-icon icon="hassio:information"></ha-icon>
                            <paper-tooltip>
                              Grant the add-on elevated system access.
                            </paper-tooltip>
@ -562,7 +562,7 @@ class HassioAddonInfo extends LitElement {
          width: 180px;
          display: inline-block;
        }
-        .state iron-icon {
+        .state ha-icon {
          width: 16px;
          height: 16px;
          color: var(--secondary-text-color);
@ -570,10 +570,10 @@ class HassioAddonInfo extends LitElement {
        ha-switch {
          display: flex;
        }
-        iron-icon.running {
+        ha-icon.running {
          color: var(--paper-green-400);
        }
-        iron-icon.stopped {
+        ha-icon.stopped {
          color: var(--google-red-300);
        }
        ha-call-api-button {
@ -618,7 +618,7 @@ class HassioAddonInfo extends LitElement {
        .security ha-label-badge {
          cursor: pointer;
          margin-right: 4px;
-          --iron-icon-height: 45px;
+          --mdc-icon-size: 45px;
          --ha-label-badge-padding: 8px 0 0 0;
        }
      `,
--- a/hassio/src/components/hassio-card-content.ts
+++ b/hassio/src/components/hassio-card-content.ts
@ -1,4 +1,3 @@
-import "@polymer/iron-icon/iron-icon";
 import {
  css,
  CSSResult,
@ -9,6 +8,7 @@ import {
  TemplateResult,
 } from "lit-element";
 import "../../../src/components/ha-relative-time";
+import "../../../src/components/ha-icon";
 import { HomeAssistant } from "../../../src/types";

@customElement("hassio-card-content")
@ -48,11 +48,11 @@ class HassioCardContent extends LitElement {
            </div>
          `
        : html`
-            <iron-icon
+            <ha-icon
              class=${this.iconClass}
              .icon=${this.icon}
              .title=${this.iconTitle}
-            ></iron-icon>
+            ></ha-icon>
          `}
      <div>
        <div class="title">
@ -78,25 +78,25 @@ class HassioCardContent extends LitElement {

  static get styles(): CSSResult {
    return css`
-      iron-icon {
+      ha-icon {
        margin-right: 24px;
        margin-left: 8px;
        margin-top: 12px;
        float: left;
        color: var(--secondary-text-color);
      }
-      iron-icon.update {
+      ha-icon.update {
        color: var(--paper-orange-400);
      }
-      iron-icon.running,
-      iron-icon.installed {
+      ha-icon.running,
+      ha-icon.installed {
        color: var(--paper-green-400);
      }
-      iron-icon.hassupdate,
-      iron-icon.snapshot {
+      ha-icon.hassupdate,
+      ha-icon.snapshot {
        color: var(--paper-item-icon-color);
      }
-      iron-icon.not_available {
+      ha-icon.not_available {
        color: var(--google-red-500);
      }
      .title {
--- a/hassio/src/components/hassio-search-input.ts
+++ b/hassio/src/components/hassio-search-input.ts
@ -1,6 +1,6 @@
 import "@material/mwc-button";
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-icon";
 import "@polymer/paper-input/paper-input";
 import {
  css,
@ -24,21 +24,17 @@ class HassioSearchInput extends LitElement {
          .value=${this.filter}
          @value-changed=${this._filterInputChanged}
        >
-          <iron-icon
-            icon="hassio:magnify"
-            slot="prefix"
-            class="prefix"
-          ></iron-icon>
+          <ha-icon icon="hassio:magnify" slot="prefix" class="prefix"></ha-icon>
          ${this.filter &&
          html`
-            <paper-icon-button
+            <ha-icon-button
              slot="suffix"
              class="suffix"
              @click=${this._clearSearch}
              icon="hassio:close"
              alt="Clear"
              title="Clear"
-            ></paper-icon-button>
+            ></ha-icon-button>
          `}
        </paper-input>
      </div>
@ -71,6 +67,9 @@ class HassioSearchInput extends LitElement {
      .prefix {
        margin: 8px;
      }
+      ha-icon {
+        color: var(--primary-text-color);
+      }
    `;
  }
 }
--- a/hassio/src/dashboard/hassio-update.ts
+++ b/hassio/src/dashboard/hassio-update.ts
@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-card/paper-card";
 import {
  css,
@ -17,6 +16,7 @@ import {
  HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
 import { haStyle } from "../../../src/resources/styles";
+import "../../../src/components/ha-icon";
 import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-card-content";
 import { hassioStyle } from "../resources/hassio-style";
@ -112,7 +112,7 @@ export class HassioUpdate extends LitElement {
          ${icon
            ? html`
                <div class="icon">
-                  <iron-icon .icon=${icon}></iron-icon>
+                  <ha-icon .icon=${icon}></ha-icon>
                </div>
              `
            : ""}
@ -158,8 +158,7 @@ export class HassioUpdate extends LitElement {
      hassioStyle,
      css`
        .icon {
-          --iron-icon-height: 48px;
-          --iron-icon-width: 48px;
+          --mdc-icon-size: 48px;
          float: right;
          margin: 0 0 2px 10px;
          color: var(--primary-text-color);
--- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
+++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { PaperDialogElement } from "@polymer/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../../../src/components/ha-icon-button";
 import {
  css,
  CSSResult,
@ -36,10 +36,10 @@ class HassioMarkdownDialog extends LitElement {
    return html`
      <ha-paper-dialog id="dialog" with-backdrop="">
        <app-toolbar>
-          <paper-icon-button
+          <ha-icon-button
            icon="hassio:close"
            dialog-dismiss=""
-          ></paper-icon-button>
+          ></ha-icon-button>
          <div main-title="">${this.title}</div>
        </app-toolbar>
        <paper-dialog-scrollable>
--- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
+++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
@ -1,10 +1,10 @@
 import "@material/mwc-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-icon/iron-icon";
 import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import { PaperDialogElement } from "@polymer/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-icon";
 import "@polymer/paper-input/paper-input";
 import {
  css,
@ -119,10 +119,10 @@ class HassioSnapshotDialog extends LitElement {
        .on-iron-overlay-closed=${this._dialogClosed}
      >
        <app-toolbar>
-          <paper-icon-button
+          <ha-icon-button
            icon="hassio:close"
            dialog-dismiss=""
-          ></paper-icon-button>
+          ></ha-icon-button>
          <div main-title="">${this._computeName}</div>
        </app-toolbar>
        <div class="details">
@ -200,13 +200,13 @@ class HassioSnapshotDialog extends LitElement {
        <ul class="buttons">
          <li>
            <mwc-button @click=${this._downloadClicked}>
-              <iron-icon icon="hassio:download" class="icon"></iron-icon>
+              <ha-icon icon="hassio:download" class="icon"></ha-icon>
              Download Snapshot
            </mwc-button>
          </li>
          <li>
            <mwc-button @click=${this._partialRestoreClicked}>
-              <iron-icon icon="hassio:history" class="icon"> </iron-icon>
+              <ha-icon icon="hassio:history" class="icon"> </ha-icon>
              Restore Selected
            </mwc-button>
          </li>
@ -214,7 +214,7 @@ class HassioSnapshotDialog extends LitElement {
            ? html`
                <li>
                  <mwc-button @click=${this._fullRestoreClicked}>
-                    <iron-icon icon="hassio:history" class="icon"> </iron-icon>
+                    <ha-icon icon="hassio:history" class="icon"> </ha-icon>
                    Wipe &amp; restore
                  </mwc-button>
                </li>
@ -222,7 +222,7 @@ class HassioSnapshotDialog extends LitElement {
            : ""}
          <li>
            <mwc-button @click=${this._deleteClicked}>
-              <iron-icon icon="hassio:delete" class="icon warning"> </iron-icon>
+              <ha-icon icon="hassio:delete" class="icon warning"> </ha-icon>
              <span class="warning">Delete Snapshot</span>
            </mwc-button>
          </li>
--- a/hassio/src/entrypoint.ts
+++ b/hassio/src/entrypoint.ts
@ -2,8 +2,6 @@ window.loadES5Adapter().then(() => {
  // eslint-disable-next-line
  import(/* webpackChunkName: "roboto" */ "../../src/resources/roboto");
  // eslint-disable-next-line
-  import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons");
-  // eslint-disable-next-line
  import(/* webpackChunkName: "hassio-main" */ "./hassio-main");
 });

--- a/hassio/src/hassio-main.ts
+++ b/hassio/src/hassio-main.ts
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button";
+import "../../src/components/ha-icon-button";
 import { PolymerElement } from "@polymer/polymer";
 import { customElement, property, PropertyValues } from "lit-element";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
@ -34,11 +34,11 @@ import { HomeAssistant } from "../../src/types";
 // Don't codesplit it, that way the dashboard always loads fast.
 import "./hassio-panel";

-// The register callback of the IronA11yKeysBehavior inside paper-icon-button
-// is not called, causing _keyBindings to be uninitiliazed for paper-icon-button,
+// The register callback of the IronA11yKeysBehavior inside ha-icon-button
+// is not called, causing _keyBindings to be uninitiliazed for ha-icon-button,
 // causing an exception when added to DOM. When transpiled to ES5, this will
 // break the build.
-customElements.get("paper-icon-button").prototype._keyBindings = {};
+customElements.get("ha-icon-button").prototype._keyBindings = {};

@customElement("hassio-main")
 class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@ -86,7 +86,7 @@ class HassioIngressView extends LitElement {
        height: 100%;
        border: 0;
      }
-      paper-icon-button {
+      ha-icon-button {
        color: var(--text-primary-color);
      }
    `;
--- a/hassio/src/resources/hassio-icons.js
+++ b/hassio/src/resources/hassio-icons.js
@ -1,7 +0,0 @@
-import "../../../src/components/ha-iconset-svg";
-import iconSetContent from "../../hassio-icons.html";
-
-const documentContainer = document.createElement("template");
-documentContainer.setAttribute("style", "display: none;");
-documentContainer.innerHTML = iconSetContent;
-document.head.appendChild(documentContainer.content);
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@ -98,12 +98,12 @@ class HassioSnapshots extends LitElement {
      >
        <span slot="header">Snapshots</span>

-        <paper-icon-button
+        <ha-icon-button
          icon="hassio:reload"
          slot="toolbar-icon"
          aria-label="Reload snapshots"
          @click=${this.refreshData}
-        ></paper-icon-button>
+        ></ha-icon-button>

        <div class="content">
          <h1>
--- a/package.json
+++ b/package.json
@ -29,8 +29,10 @@
    "@material/mwc-checkbox": "^0.13.0",
    "@material/mwc-dialog": "^0.13.0",
    "@material/mwc-fab": "^0.13.0",
+    "@material/mwc-icon-button": "^0.13.0",
    "@material/mwc-ripple": "^0.13.0",
    "@material/mwc-switch": "^0.13.0",
+    "@mdi/js": "4.9.95",
    "@mdi/svg": "4.9.95",
    "@polymer/app-layout": "^3.0.2",
    "@polymer/app-route": "^3.0.2",
@ -39,7 +41,6 @@
    "@polymer/iron-autogrow-textarea": "^3.0.1",
    "@polymer/iron-flex-layout": "^3.0.1",
    "@polymer/iron-icon": "^3.0.1",
-    "@polymer/iron-iconset-svg": "^3.0.1",
    "@polymer/iron-image": "^3.0.1",
    "@polymer/iron-input": "^3.0.1",
    "@polymer/iron-label": "^3.0.1",
@ -55,7 +56,6 @@
    "@polymer/paper-dialog-scrollable": "^3.0.1",
    "@polymer/paper-drawer-panel": "^3.0.1",
    "@polymer/paper-dropdown-menu": "^3.0.1",
-    "@polymer/paper-icon-button": "^3.0.2",
    "@polymer/paper-input": "^3.0.1",
    "@polymer/paper-item": "^3.0.1",
    "@polymer/paper-listbox": "^3.0.1",
@ -89,6 +89,7 @@
    "google-timezones-json": "^1.0.2",
    "hls.js": "^0.12.4",
    "home-assistant-js-websocket": "5.0.0",
+    "idb-keyval": "^3.2.0",
    "intl-messageformat": "^8.3.9",
    "js-yaml": "^3.13.1",
    "leaflet": "^1.4.0",
@ -170,6 +171,7 @@
    "map-stream": "^0.0.7",
    "merge-stream": "^1.0.1",
    "mocha": "^6.0.2",
+    "object-hash": "^2.0.3",
    "parse5": "^5.1.0",
    "prettier": "^2.0.4",
    "raw-loader": "^2.0.0",
@ -198,12 +200,15 @@
    "lit-html": "^1.1.2",
    "@material/button": "^5.0.0",
    "@material/checkbox": "^5.0.0",
+    "@material/density": "^5.0.0",
    "@material/dialog": "^5.0.0",
    "@material/fab": "^5.0.0",
+    "@material/feature-targeting": "^5.0.0",
    "@material/switch": "^5.0.0",
    "@material/ripple": "^5.0.0",
    "@material/dom": "^5.0.0",
-    "@material/touch-target": "^5.0.0"
+    "@material/touch-target": "^5.0.0",
+    "@material/theme": "^5.0.0"
  },
  "main": "src/home-assistant.js",
  "husky": {
--- a/src/common/search/search-input.ts
+++ b/src/common/search/search-input.ts
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../components/ha-icon-button";
 import "@polymer/paper-input/paper-input";
 import {
  css,
@ -50,14 +50,14 @@ class SearchInput extends LitElement {
        <ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
        ${this.filter &&
        html`
-          <paper-icon-button
+          <ha-icon-button
            slot="suffix"
            class="suffix"
            @click=${this._clearSearch}
            icon="hass:close"
            alt="Clear"
            title="Clear"
-          ></paper-icon-button>
+          ></ha-icon-button>
        `}
      </paper-input>
    `;
--- a/src/components/device/ha-area-devices-picker.ts
+++ b/src/components/device/ha-area-devices-picker.ts
@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../ha-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@ -61,7 +61,7 @@ const rowRenderer = (
        margin: -10px 0;
        padding: 0;
      }
-      paper-icon-button {
+      ha-icon-button {
        float: right;
      }
      .devices {
@ -325,7 +325,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
        >
          ${this.value
            ? html`
-                <paper-icon-button
+                <ha-icon-button
                  aria-label=${this.hass.localize(
                    "ui.components.device-picker.clear"
                  )}
@ -336,12 +336,12 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
                  no-ripple
                >
                  Clear
-                </paper-icon-button>
+                </ha-icon-button>
              `
            : ""}
          ${areas.length > 0
            ? html`
-                <paper-icon-button
+                <ha-icon-button
                  aria-label=${this.hass.localize(
                    "ui.components.device-picker.show_devices"
                  )}
@ -350,7 +350,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
                  .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
                >
                  Toggle
-                </paper-icon-button>
+                </ha-icon-button>
              `
            : ""}
        </paper-input>
@ -408,7 +408,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {

  static get styles(): CSSResult {
    return css`
-      paper-input > paper-icon-button {
+      paper-input > ha-icon-button {
        width: 24px;
        height: 24px;
        padding: 2px;
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../ha-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@ -247,7 +247,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
        >
          ${this.value
            ? html`
-                <paper-icon-button
+                <ha-icon-button
                  aria-label=${this.hass.localize(
                    "ui.components.device-picker.clear"
                  )}
@ -258,12 +258,12 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
                  no-ripple
                >
                  Clear
-                </paper-icon-button>
+                </ha-icon-button>
              `
            : ""}
          ${devices.length > 0
            ? html`
-                <paper-icon-button
+                <ha-icon-button
                  aria-label=${this.hass.localize(
                    "ui.components.device-picker.show_devices"
                  )}
@ -272,7 +272,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
                  .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
                >
                  Toggle
-                </paper-icon-button>
+                </ha-icon-button>
              `
            : ""}
        </paper-input>
@ -311,9 +311,8 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {

  static get styles(): CSSResult {
    return css`
-      paper-input > paper-icon-button {
-        width: 24px;
-        height: 24px;
+      paper-input > ha-icon-button {
+        --mdc-icon-button-size: 24px;
        padding: 2px;
        color: var(--secondary-text-color);
      }
--- a/src/components/device/ha-devices-picker.ts
+++ b/src/components/device/ha-devices-picker.ts
@ -1,4 +1,3 @@
-import "@polymer/paper-icon-button/paper-icon-button-light";
 import {
  customElement,
  html,
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@ -1,6 +1,6 @@
 /* eslint-plugin-disable lit */
 import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../ha-icon-button";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 import { timeOut } from "@polymer/polymer/lib/utils/async";
 import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
@ -107,7 +107,7 @@ class HaChartBase extends mixinBehaviors(
          margin-right: inherit;
          margin-left: 4px;
        }
-        paper-icon-button {
+        ha-icon-button {
          color: var(--secondary-text-color);
        }
      </style>
--- a/src/components/entity/ha-entities-picker.ts
+++ b/src/components/entity/ha-entities-picker.ts
@ -1,4 +1,3 @@
-import "@polymer/paper-icon-button/paper-icon-button-light";
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
  customElement,
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../ha-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
@ -192,7 +192,7 @@ class HaEntityPicker extends LitElement {
        >
          ${this.value
            ? html`
-                <paper-icon-button
+                <ha-icon-button
                  aria-label=${this.hass.localize(
                    "ui.components.entity.entity-picker.clear"
                  )}
@ -203,11 +203,11 @@ class HaEntityPicker extends LitElement {
                  no-ripple
                >
                  Clear
-                </paper-icon-button>
+                </ha-icon-button>
              `
            : ""}

-          <paper-icon-button
+          <ha-icon-button
            aria-label=${this.hass.localize(
              "ui.components.entity.entity-picker.show_entities"
            )}
@ -216,7 +216,7 @@ class HaEntityPicker extends LitElement {
            .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
          >
            Toggle
-          </paper-icon-button>
+          </ha-icon-button>
        </paper-input>
      </vaadin-combo-box-light>
    `;
@ -252,9 +252,8 @@ class HaEntityPicker extends LitElement {

  static get styles(): CSSResult {
    return css`
-      paper-input > paper-icon-button {
-        width: 24px;
-        height: 24px;
+      paper-input > ha-icon-button {
+        --mdc-icon-button-size: 24px;
        padding: 0px 2px;
        color: var(--secondary-text-color);
      }
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../ha-icon-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
  css,
@ -37,20 +37,20 @@ class HaEntityToggle extends LitElement {

    if (this.stateObj.attributes.assumed_state) {
      return html`
-        <paper-icon-button
+        <ha-icon-button
          aria-label=${`Turn ${computeStateName(this.stateObj)} off`}
          icon="hass:flash-off"
          .disabled=${this.stateObj.state === UNAVAILABLE}
          @click=${this._turnOff}
          ?state-active=${!this._isOn}
-        ></paper-icon-button>
-        <paper-icon-button
+        ></ha-icon-button>
+        <ha-icon-button
          aria-label=${`Turn ${computeStateName(this.stateObj)} on`}
          icon="hass:flash"
          .disabled=${this.stateObj.state === UNAVAILABLE}
          @click=${this._turnOn}
          ?state-active=${this._isOn}
-        ></paper-icon-button>
+        ></ha-icon-button>
      `;
    }

@ -144,15 +144,12 @@ class HaEntityToggle extends LitElement {
        white-space: nowrap;
        min-width: 38px;
      }
-      paper-icon-button {
-        color: var(
-          --paper-icon-button-inactive-color,
-          var(--primary-text-color)
-        );
+      ha-icon-button {
+        color: var(--ha-icon-button-inactive-color, var(--primary-text-color));
        transition: color 0.5s;
      }
-      paper-icon-button[state-active] {
-        color: var(--paper-icon-button-active-color, var(--primary-color));
+      ha-icon-button[state-active] {
+        color: var(--ha-icon-button-active-color, var(--primary-color));
      }
      ha-switch {
        padding: 13px 5px;
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "./ha-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@ -117,7 +117,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
        >
          ${this.value
            ? html`
-                <paper-icon-button
+                <ha-icon-button
                  aria-label=${this.hass.localize(
                    "ui.components.area-picker.clear"
                  )}
@ -128,12 +128,12 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
                  no-ripple
                >
                  ${this.hass.localize("ui.components.area-picker.clear")}
-                </paper-icon-button>
+                </ha-icon-button>
              `
            : ""}
          ${this._areas.length > 0
            ? html`
-                <paper-icon-button
+                <ha-icon-button
                  aria-label=${this.hass.localize(
                    "ui.components.area-picker.show_areas"
                  )}
@ -142,7 +142,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
                  .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
                >
                  ${this.hass.localize("ui.components.area-picker.toggle")}
-                </paper-icon-button>
+                </ha-icon-button>
              `
            : ""}
        </paper-input>
@ -214,9 +214,8 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {

  static get styles(): CSSResult {
    return css`
-      paper-input > paper-icon-button {
-        width: 24px;
-        height: 24px;
+      paper-input > ha-icon-button {
+        --mdc-icon-button-size: 24px;
        padding: 2px;
        color: var(--secondary-text-color);
      }
--- a/src/components/ha-climate-control.js
+++ b/src/components/ha-climate-control.js
@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "./ha-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -31,9 +31,8 @@ class HaClimateControl extends EventsMixin(PolymerElement) {
          font-size: 200%;
          text-align: right;
        }
-        paper-icon-button {
-          height: 48px;
-          width: 48px;
+        ha-icon-button {
+          --mdc-icon-size: 32px;
        }
      </style>

@ -41,16 +40,16 @@ class HaClimateControl extends EventsMixin(PolymerElement) {
      <div id="target_temperature">[[value]] [[units]]</div>
      <div class="control-buttons">
        <div>
-          <paper-icon-button
+          <ha-icon-button
            icon="hass:chevron-up"
            on-click="incrementValue"
-          ></paper-icon-button>
+          ></ha-icon-button>
        </div>
        <div>
-          <paper-icon-button
+          <ha-icon-button
            icon="hass:chevron-down"
            on-click="decrementValue"
-          ></paper-icon-button>
+          ></ha-icon-button>
        </div>
      </div>
    `;
--- a/src/components/ha-combo-box.js
+++ b/src/components/ha-combo-box.js
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "./ha-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -11,7 +11,7 @@ class HaComboBox extends EventsMixin(PolymerElement) {
  static get template() {
    return html`
      <style>
-        paper-input > paper-icon-button {
+        paper-input > ha-icon-button {
          width: 24px;
          height: 24px;
          padding: 2px;
@ -36,19 +36,19 @@ class HaComboBox extends EventsMixin(PolymerElement) {
          class="input"
          value="[[value]]"
        >
-          <paper-icon-button
+          <ha-icon-button
            slot="suffix"
            class="clear-button"
            icon="hass:close"
            hidden$="[[!value]]"
-            >Clear</paper-icon-button
+            >Clear</ha-icon-button
          >
-          <paper-icon-button
+          <ha-icon-button
            slot="suffix"
            class="toggle-button"
            icon="[[_computeToggleIcon(opened)]]"
            hidden$="[[!items.length]]"
-            >Toggle</paper-icon-button
+            >Toggle</ha-icon-button
          >
        </paper-input>
        <template>
--- a/src/components/ha-cover-controls.js
+++ b/src/components/ha-cover-controls.js
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "./ha-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -18,27 +18,27 @@ class HaCoverControls extends PolymerElement {
      </style>

      <div class="state">
-        <paper-icon-button
+        <ha-icon-button
          aria-label="Open cover"
          icon="[[computeOpenIcon(stateObj)]]"
          on-click="onOpenTap"
          invisible$="[[!entityObj.supportsOpen]]"
          disabled="[[computeOpenDisabled(stateObj, entityObj)]]"
-        ></paper-icon-button>
-        <paper-icon-button
+        ></ha-icon-button>
+        <ha-icon-button
          aria-label="Stop the cover from moving"
          icon="hass:stop"
          on-click="onStopTap"
          invisible$="[[!entityObj.supportsStop]]"
          disabled="[[computStopDisabled(stateObj)]]"
-        ></paper-icon-button>
-        <paper-icon-button
+        ></ha-icon-button>
+        <ha-icon-button
          aria-label="Close cover"
          icon="[[computeCloseIcon(stateObj)]]"
          on-click="onCloseTap"
          invisible$="[[!entityObj.supportsClose]]"
          disabled="[[computeClosedDisabled(stateObj, entityObj)]]"
-        ></paper-icon-button>
+        ></ha-icon-button>
      </div>
    `;
  }
--- a/src/components/ha-cover-tilt-controls.js
+++ b/src/components/ha-cover-tilt-controls.js
@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "./ha-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -18,30 +18,30 @@ class HaCoverTiltControls extends PolymerElement {
          visibility: hidden !important;
        }
      </style>
-      <paper-icon-button
+      <ha-icon-button
        aria-label="Open cover tilt"
        icon="hass:arrow-top-right"
        on-click="onOpenTiltTap"
        title="Open tilt"
        invisible$="[[!entityObj.supportsOpenTilt]]"
        disabled="[[computeOpenDisabled(stateObj, entityObj)]]"
-      ></paper-icon-button>
-      <paper-icon-button
+      ></ha-icon-button>
+      <ha-icon-button
        aria-label="Stop cover from moving"
        icon="hass:stop"
        on-click="onStopTiltTap"
        invisible$="[[!entityObj.supportsStopTilt]]"
        disabled="[[computStopDisabled(stateObj)]]"
        title="Stop tilt"
-      ></paper-icon-button>
-      <paper-icon-button
+      ></ha-icon-button>
+      <ha-icon-button
        aria-label="Close cover tilt"
        icon="hass:arrow-bottom-left"
        on-click="onCloseTiltTap"
        title="Close tilt"
        invisible$="[[!entityObj.supportsCloseTilt]]"
        disabled="[[computeClosedDisabled(stateObj, entityObj)]]"
-      ></paper-icon-button>
+      ></ha-icon-button>
    `;
  }

--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@ -1,7 +1,7 @@
 import "@material/mwc-dialog";
 import type { Dialog } from "@material/mwc-dialog";
 import { style } from "@material/mwc-dialog/mwc-dialog-css";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "./ha-icon-button";
 import { css, CSSResult, customElement, html } from "lit-element";
 import type { Constructor, HomeAssistant } from "../types";

@ -9,12 +9,12 @@ const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;

 export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
  ${title}
-  <paper-icon-button
+  <ha-icon-button
    aria-label=${hass.localize("ui.dialogs.generic.close")}
    icon="hass:close"
    dialogAction="close"
    class="close_button"
-  ></paper-icon-button>
+  ></ha-icon-button>
 `;

@customElement("ha-dialog")
--- a/src/components/ha-form/ha-form-multi_select.ts
+++ b/src/components/ha-form/ha-form-multi_select.ts
@ -1,4 +1,3 @@
-import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
@ -21,6 +20,7 @@ import {
  HaFormMultiSelectData,
  HaFormMultiSelectSchema,
 } from "./ha-form";
+import "../ha-icon";

@customElement("ha-form-multi_select")
 export class HaFormMultiSelect extends LitElement implements HaFormElement {
@ -64,11 +64,11 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
            input-aria-haspopup="listbox"
            autocomplete="off"
          >
-            <iron-icon
+            <ha-icon
              icon="paper-dropdown-menu:arrow-drop-down"
              suffix
              slot="suffix"
-            ></iron-icon>
+            ></ha-icon>
          </paper-input>
        </div>
        <paper-listbox
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../ha-icon-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
@ -47,7 +47,7 @@ export class HaFormString extends LitElement implements HaFormElement {
            .autoValidate=${this.schema.required}
            @value-changed=${this._valueChanged}
          >
-            <paper-icon-button
+            <ha-icon-button
              toggles
              .active=${this._unmaskedPassword}
              slot="suffix"
@ -56,7 +56,7 @@ export class HaFormString extends LitElement implements HaFormElement {
              title="Click to toggle between masked and clear password"
              @click=${this._toggleUnmaskedPassword}
            >
-            </paper-icon-button>
+            </ha-icon-button>
          </paper-input>
        `
      : html`
--- a/src/components/ha-icon-button-arrow-next.ts
+++ b/src/components/ha-icon-button-arrow-next.ts
@ -0,0 +1,23 @@
+import { HaIconButton } from "./ha-icon-button";
+
+export class HaIconButtonArrowNext extends HaIconButton {
+  public connectedCallback() {
+    super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:arrow-right"
+          : "hass:arrow-left";
+    }, 100);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-button-arrow-next": HaIconButtonArrowNext;
+  }
+}
+
+customElements.define("ha-icon-button-arrow-next", HaIconButtonArrowNext);
--- a/src/components/ha-icon-button-arrow-prev.ts
+++ b/src/components/ha-icon-button-arrow-prev.ts
@ -0,0 +1,23 @@
+import { HaIconButton } from "./ha-icon-button";
+
+export class HaIconButtonArrowPrev extends HaIconButton {
+  public connectedCallback() {
+    super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:arrow-left"
+          : "hass:arrow-right";
+    }, 100);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-button-arrow-prev": HaIconButtonArrowPrev;
+  }
+}
+
+customElements.define("ha-icon-button-arrow-prev", HaIconButtonArrowPrev);
--- a/src/components/ha-icon-button-next.ts
+++ b/src/components/ha-icon-button-next.ts
@ -0,0 +1,23 @@
+import { HaIconButton } from "./ha-icon-button";
+
+export class HaIconButtonNext extends HaIconButton {
+  public connectedCallback() {
+    super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:chevron-right"
+          : "hass:chevron-left";
+    }, 100);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-button-next": HaIconButtonNext;
+  }
+}
+
+customElements.define("ha-icon-button-next", HaIconButtonNext);
--- a/src/components/ha-icon-button-prev.ts
+++ b/src/components/ha-icon-button-prev.ts
@ -0,0 +1,23 @@
+import { HaIconButton } from "./ha-icon-button";
+
+export class HaIconButtonPrev extends HaIconButton {
+  public connectedCallback() {
+    super.connectedCallback();
+
+    // wait to check for direction since otherwise direction is wrong even though top level is RTL
+    setTimeout(() => {
+      this.icon =
+        window.getComputedStyle(this).direction === "ltr"
+          ? "hass:chevron-left"
+          : "hass:chevron-right";
+    }, 100);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-button-prev": HaIconButtonPrev;
+  }
+}
+
+customElements.define("ha-icon-button-prev", HaIconButtonPrev);
--- a/src/components/ha-icon-button.ts
+++ b/src/components/ha-icon-button.ts
@ -0,0 +1,56 @@
+import "@material/mwc-icon-button";
+import {
+  customElement,
+  html,
+  TemplateResult,
+  property,
+  LitElement,
+  CSSResult,
+  css,
+} from "lit-element";
+import "./ha-icon";
+
+@customElement("ha-icon-button")
+export class HaIconButton extends LitElement {
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ type: String }) icon = "";
+
+  @property({ type: String }) label = "";
+
+  protected render(): TemplateResult {
+    return html`
+      <mwc-icon-button
+        .label=${this.label || this.icon}
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+      >
+        <ha-icon .icon=${this.icon}></ha-icon>
+      </mwc-icon-button>
+    `;
+  }
+
+  private _handleClick(ev) {
+    if (this.disabled) {
+      ev.stopPropagation();
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      ha-icon {
+        display: inline-flex;
+        vertical-align: initial;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon-button": HaIconButton;
+  }
+}
--- a/src/components/ha-icon-next.ts
+++ b/src/components/ha-icon-next.ts
@ -1,18 +1,16 @@
-import "@polymer/iron-icon/iron-icon";
-// Not duplicate, this is for typing.
-// eslint-disable-next-line
-import { HaIcon } from "./ha-icon";
+import { HaSvgIcon } from "./ha-svg-icon";
+import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";

-export class HaIconNext extends HaIcon {
+export class HaIconNext extends HaSvgIcon {
  public connectedCallback() {
    super.connectedCallback();

    // wait to check for direction since otherwise direction is wrong even though top level is RTL
    setTimeout(() => {
-      this.icon =
+      this.path =
        window.getComputedStyle(this).direction === "ltr"
-          ? "hass:chevron-right"
-          : "hass:chevron-left";
+          ? mdiChevronRight
+          : mdiChevronLeft;
    }, 100);
  }
 }
--- a/src/components/ha-icon-prev.ts
+++ b/src/components/ha-icon-prev.ts
@ -1,18 +1,16 @@
-import "@polymer/iron-icon/iron-icon";
-// Not duplicate, this is for typing.
-// eslint-disable-next-line
-import { HaIcon } from "./ha-icon";
+import { HaSvgIcon } from "./ha-svg-icon";
+import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";

-export class HaIconPrev extends HaIcon {
+export class HaIconPrev extends HaSvgIcon {
  public connectedCallback() {
    super.connectedCallback();

    // wait to check for direction since otherwise direction is wrong even though top level is RTL
    setTimeout(() => {
-      this.icon =
+      this.path =
        window.getComputedStyle(this).direction === "ltr"
-          ? "hass:chevron-left"
-          : "hass:chevron-right";
+          ? mdiChevronLeft
+          : mdiChevronRight;
    }, 100);
  }
 }
--- a/src/components/ha-icon.ts
+++ b/src/components/ha-icon.ts
@ -1,34 +1,133 @@
 import "@polymer/iron-icon/iron-icon";
-import type { IronIconElement } from "@polymer/iron-icon/iron-icon";
-import { Constructor } from "../types";
+import { get, Store } from "idb-keyval";
+import {
+  customElement,
+  LitElement,
+  property,
+  PropertyValues,
+  html,
+  TemplateResult,
+  css,
+  CSSResult,
+} from "lit-element";
+import "./ha-svg-icon";
+import { debounce } from "../common/util/debounce";
+import { iconMetadata } from "../resources/icon-metadata";
+import { IconMetadata } from "../types";

-const ironIconClass = customElements.get("iron-icon") as Constructor<
-  IronIconElement
->;
-
-let loaded = false;
-
-export class HaIcon extends ironIconClass {
-  private _iconsetName?: string;
-
-  public listen(
-    node: EventTarget | null,
-    eventName: string,
-    methodName: string
-  ): void {
-    super.listen(node, eventName, methodName);
-
-    if (!loaded && this._iconsetName === "mdi") {
-      loaded = true;
-      import(/* webpackChunkName: "mdi-icons" */ "../resources/mdi-icons");
-    }
-  }
+interface Icons {
+  [key: string]: string;
 }

+interface Chunks {
+  [key: string]: Promise<Icons>;
+}
+
+const iconStore = new Store("hass-icon-db", "mdi-icon-store");
+const chunks: Chunks = {};
+const MDI_PREFIXES = ["mdi", "hass", "hassio"];
+
+const findIconChunk = (icon): string => {
+  let lastChunk: IconMetadata;
+  for (const chunk of iconMetadata) {
+    if (chunk.start !== undefined && icon < chunk.start) {
+      break;
+    }
+    lastChunk = chunk;
+  }
+  return lastChunk!.file;
+};
+
+const debouncedWriteCache = debounce(async () => {
+  const keys = Object.keys(chunks);
+  const iconsSets: Icons[] = await Promise.all(Object.values(chunks));
+  // We do a batch opening the store just once, for (considerable) performance
+  iconStore._withIDBStore("readwrite", (store) => {
+    iconsSets.forEach((icons, idx) => {
+      Object.entries(icons).forEach(([name, path]) => {
+        store.put(path, name);
+      });
+      delete chunks[keys[idx]];
+    });
+  });
+}, 2000);
+
+@customElement("ha-icon")
+export class HaIcon extends LitElement {
+  @property() public icon?: string;
+
+  @property() private _path?: string;
+
+  @property() private _noMdi = false;
+
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("icon")) {
+      this._loadIcon();
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this.icon) {
+      return html``;
+    }
+    if (this._noMdi) {
+      return html`<iron-icon .icon=${this.icon}></iron-icon>`;
+    }
+    return html`<ha-svg-icon .path=${this._path}></ha-svg-icon>`;
+  }
+
+  private async _loadIcon() {
+    if (!this.icon) {
+      return;
+    }
+    const icon = this.icon.split(":", 2);
+    if (!MDI_PREFIXES.includes(icon[0])) {
+      this._noMdi = true;
+      return;
+    }
+
+    this._noMdi = false;
+
+    const iconName = icon[1];
+    const cachedPath: string = await get(iconName, iconStore);
+    if (cachedPath) {
+      this._path = cachedPath;
+      return;
+    }
+    const chunk = findIconChunk(iconName);
+
+    if (chunk in chunks) {
+      this._setPath(chunks[chunk], iconName);
+      return;
+    }
+    const iconPromise = fetch(`/static/mdi/${chunk}.json`).then((response) =>
+      response.json()
+    );
+    chunks[chunk] = iconPromise;
+    this._setPath(iconPromise, iconName);
+    debouncedWriteCache();
+  }
+
+  private async _setPath(promise: Promise<Icons>, iconName: string) {
+    const iconPack = await promise;
+    this._path = iconPack[iconName];
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        vertical-align: middle;
+        fill: currentcolor;
+      }
+    `;
+  }
+}
 declare global {
  interface HTMLElementTagNameMap {
    "ha-icon": HaIcon;
  }
 }
-
-customElements.define("ha-icon", HaIcon);
--- a/src/components/ha-iconset-svg.js
+++ b/src/components/ha-iconset-svg.js
@ -1,33 +0,0 @@
-import "@polymer/iron-iconset-svg/iron-iconset-svg";
-
-const IronIconsetClass = customElements.get("iron-iconset-svg");
-
-class HaIconset extends IronIconsetClass {
-  /**
-   * Fire 'iron-iconset-added' event at next microtask.
-   */
-  _fireIronIconsetAdded() {
-    this.async(() => this.fire("iron-iconset-added", this, { node: window }));
-  }
-
-  /**
-   *
-   * When name is changed, register iconset metadata
-   *
-   */
-  _nameChanged() {
-    this._meta.value = null;
-    this._meta.key = this.name;
-    this._meta.value = this;
-    if (this.ownerDocument && this.ownerDocument.readyState === "loading") {
-      // Document still loading. It could be that not all icons in the iconset are parsed yet.
-      this.ownerDocument.addEventListener("DOMContentLoaded", () => {
-        this._fireIronIconsetAdded();
-      });
-    } else {
-      this._fireIronIconsetAdded();
-    }
-  }
-}
-
-customElements.define("ha-iconset-svg", HaIconset);
--- a/src/components/ha-menu-button.ts
+++ b/src/components/ha-menu-button.ts
@ -1,4 +1,3 @@
-import "@polymer/paper-icon-button/paper-icon-button";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
  css,
@ -13,6 +12,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-icon-button";

@customElement("ha-menu-button")
 class HaMenuButton extends LitElement {
@ -55,11 +55,11 @@ class HaMenuButton extends LitElement {
          (entityId) => computeDomain(entityId) === "configurator"
        ));
    return html`
-      <paper-icon-button
+      <ha-icon-button
        aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
-        .icon=${this.hassio ? "hassio:menu" : "hass:menu"}
+        icon="hass:menu"
        @click=${this._toggleMenu}
-      ></paper-icon-button>
+      ></ha-icon-button>
      ${hasNotifications ? html` <div class="dot"></div> ` : ""}
    `;
  }
--- a/src/components/ha-paper-icon-button-arrow-next.ts
+++ b/src/components/ha-paper-icon-button-arrow-next.ts
@ -1,32 +0,0 @@
-import "@polymer/paper-icon-button/paper-icon-button";
-import type { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
-import type { Constructor } from "../types";
-
-const paperIconButtonClass = customElements.get(
-  "paper-icon-button"
-) as Constructor<PaperIconButtonElement>;
-
-export class HaPaperIconButtonArrowNext extends paperIconButtonClass {
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this.icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? "hass:arrow-right"
-          : "hass:arrow-left";
-    }, 100);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-paper-icon-button-arrow-next": HaPaperIconButtonArrowNext;
-  }
-}
-
-customElements.define(
-  "ha-paper-icon-button-arrow-next",
-  HaPaperIconButtonArrowNext
-);
--- a/src/components/ha-paper-icon-button-arrow-prev.ts
+++ b/src/components/ha-paper-icon-button-arrow-prev.ts
@ -1,38 +0,0 @@
-import "@polymer/paper-icon-button/paper-icon-button";
-import type { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
-import type { Constructor } from "../types";
-
-const paperIconButtonClass = customElements.get(
-  "paper-icon-button"
-) as Constructor<PaperIconButtonElement>;
-
-export class HaPaperIconButtonArrowPrev extends paperIconButtonClass {
-  public hassio?: boolean;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this.icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? this.hassio
-            ? "hassio:arrow-left"
-            : "hass:arrow-left"
-          : this.hassio
-          ? "hassio:arrow-right"
-          : "hass:arrow-right";
-    }, 100);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-paper-icon-button-arrow-prev": HaPaperIconButtonArrowPrev;
-  }
-}
-
-customElements.define(
-  "ha-paper-icon-button-arrow-prev",
-  HaPaperIconButtonArrowPrev
-);
--- a/src/components/ha-paper-icon-button-next.ts
+++ b/src/components/ha-paper-icon-button-next.ts
@ -1,29 +0,0 @@
-import "@polymer/paper-icon-button/paper-icon-button";
-import type { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
-import type { Constructor } from "../types";
-
-const paperIconButtonClass = customElements.get(
-  "paper-icon-button"
-) as Constructor<PaperIconButtonElement>;
-
-export class HaPaperIconButtonNext extends paperIconButtonClass {
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this.icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? "hass:chevron-right"
-          : "hass:chevron-left";
-    }, 100);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-paper-icon-button-next": HaPaperIconButtonNext;
-  }
-}
-
-customElements.define("ha-paper-icon-button-next", HaPaperIconButtonNext);
--- a/src/components/ha-paper-icon-button-prev.ts
+++ b/src/components/ha-paper-icon-button-prev.ts
@ -1,29 +0,0 @@
-import "@polymer/paper-icon-button/paper-icon-button";
-import type { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
-import type { Constructor } from "../types";
-
-const paperIconButtonClass = customElements.get(
-  "paper-icon-button"
-) as Constructor<PaperIconButtonElement>;
-
-export class HaPaperIconButtonPrev extends paperIconButtonClass {
-  public connectedCallback() {
-    super.connectedCallback();
-
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      this.icon =
-        window.getComputedStyle(this).direction === "ltr"
-          ? "hass:chevron-left"
-          : "hass:chevron-right";
-    }, 100);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-paper-icon-button-prev": HaPaperIconButtonPrev;
-  }
-}
-
-customElements.define("ha-paper-icon-button-prev", HaPaperIconButtonPrev);
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@ -1,5 +1,6 @@
+import { mdiBell, mdiCellphoneSettingsVariant } from "@mdi/js";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "./ha-icon-button";
 import "@polymer/paper-item/paper-icon-item";
 import type { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item";
@ -28,6 +29,7 @@ import {
  getExternalConfig,
 } from "../external_app/external_config";
 import type { HomeAssistant, PanelInfo } from "../types";
+import "./ha-svg-icon";
 import "./ha-icon";
 import "./ha-menu-button";
 import "./user/ha-user-badge";
@ -151,13 +153,13 @@ class HaSidebar extends LitElement {
      <div class="menu">
        ${!this.narrow
          ? html`
-              <paper-icon-button
+              <ha-icon-button
                aria-label=${hass.localize("ui.sidebar.sidebar_toggle")}
                .icon=${hass.dockedSidebar === "docked"
                  ? "hass:menu-open"
                  : "hass:menu"}
                @click=${this._toggleSidebar}
-              ></paper-icon-button>
+              ></ha-icon-button>
            `
          : ""}
        <span class="title">Home Assistant</span>
@ -205,10 +207,10 @@ class HaSidebar extends LitElement {
                @mouseleave=${this._itemMouseLeave}
              >
                <paper-icon-item>
-                  <ha-icon
+                  <ha-svg-icon
                    slot="item-icon"
-                    icon="hass:cellphone-settings-variant"
-                  ></ha-icon>
+                    .path=${mdiCellphoneSettingsVariant}
+                  ></ha-svg-icon>
                  <span class="item-text">
                    ${hass.localize("ui.sidebar.external_app_configuration")}
                  </span>
@ -230,7 +232,7 @@ class HaSidebar extends LitElement {
          aria-role="option"
          @click=${this._handleShowNotificationDrawer}
        >
-          <ha-icon slot="item-icon" icon="hass:bell"></ha-icon>
+          <ha-svg-icon slot="item-icon" .path=${mdiBell}></ha-svg-icon>
          ${!this.expanded && notificationCount > 0
            ? html`
                <span class="notification-badge" slot="item-icon">
@ -494,13 +496,13 @@ class HaSidebar extends LitElement {
        width: 256px;
      }

-      .menu paper-icon-button {
+      .menu ha-icon-button {
        color: var(--sidebar-icon-color);
      }
-      :host([expanded]) .menu paper-icon-button {
+      :host([expanded]) .menu ha-icon-button {
        margin-right: 23px;
      }
-      :host([expanded][_rtl]) .menu paper-icon-button {
+      :host([expanded][_rtl]) .menu ha-icon-button {
        margin-right: 0px;
        margin-left: 23px;
      }
@ -562,7 +564,8 @@ class HaSidebar extends LitElement {
        padding-right: 12px;
      }

-      ha-icon[slot="item-icon"] {
+      ha-icon[slot="item-icon"],
+      ha-svg-icon[slot="item-icon"] {
        color: var(--sidebar-icon-color);
      }

@ -603,7 +606,8 @@ class HaSidebar extends LitElement {
        font-size: 14px;
      }

-      a.iron-selected paper-icon-item ha-icon {
+      a.iron-selected paper-icon-item ha-icon,
+      a.iron-selected paper-icon-item ha-svg-icon {
        color: var(--sidebar-selected-icon-color);
      }

@ -665,7 +669,7 @@ class HaSidebar extends LitElement {
        padding: 0px 6px;
        color: var(--text-primary-color);
      }
-      ha-icon + .notification-badge {
+      ha-svg-icon + .notification-badge {
        position: absolute;
        bottom: 14px;
        left: 26px;
@ -710,7 +714,7 @@ class HaSidebar extends LitElement {
        font-weight: 500;
      }

-      :host([_rtl]) .menu paper-icon-button {
+      :host([_rtl]) .menu ha-icon-button {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
      }
--- a/src/components/ha-svg-icon.ts
+++ b/src/components/ha-svg-icon.ts
@ -0,0 +1,52 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  LitElement,
+  property,
+  svg,
+  SVGTemplateResult,
+} from "lit-element";
+
+@customElement("ha-svg-icon")
+export class HaSvgIcon extends LitElement {
+  @property() public path?: string;
+
+  protected render(): SVGTemplateResult {
+    return svg`
+    <svg 
+      viewBox="0 0 24 24" 
+      preserveAspectRatio="xMidYMid meet"
+      focusable="false">
+      <g>
+      ${this.path ? svg`<path d=${this.path}></path>` : ""}
+      </g>
+    </svg>`;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        vertical-align: middle;
+        fill: currentcolor;
+        width: var(--mdc-icon-size, 24px);
+        height: var(--mdc-icon-size, 24px);
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        display: block;
+      }
+    `;
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-svg-icon": HaSvgIcon;
+  }
+}
--- a/src/components/ha-water_heater-control.js
+++ b/src/components/ha-water_heater-control.js
@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "./ha-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -30,7 +30,7 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
          font-size: 200%;
          text-align: right;
        }
-        paper-icon-button {
+        ha-icon-button {
          height: 48px;
          width: 48px;
        }
@ -40,16 +40,16 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
      <div id="target_temperature">[[value]] [[units]]</div>
      <div class="control-buttons">
        <div>
-          <paper-icon-button
+          <ha-icon-button
            icon="hass:chevron-up"
            on-click="incrementValue"
-          ></paper-icon-button>
+          ></ha-icon-button>
        </div>
        <div>
-          <paper-icon-button
+          <ha-icon-button
            icon="hass:chevron-down"
            on-click="decrementValue"
-          ></paper-icon-button>
+          ></ha-icon-button>
        </div>
      </div>
    `;
--- a/src/components/map/ha-map.ts
+++ b/src/components/map/ha-map.ts
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../ha-icon-button";
 import { Circle, Layer, Map, Marker } from "leaflet";
 import {
  css,
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@ -1,5 +1,5 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../ha-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../components/ha-icon-button";
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tooltip/paper-tooltip";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
@ -146,13 +146,13 @@ class DataEntryFlowDialog extends LitElement {
            // to reset the element.
            ""
          : html`
-              <paper-icon-button
+              <ha-icon-button
                aria-label=${this.hass.localize(
                  "ui.panel.config.integrations.config_flow.dismiss"
                )}
                icon="hass:close"
                dialog-dismiss
-              ></paper-icon-button>
+              ></ha-icon-button>
              ${this._step === null
                ? // Show handler picker
                  html`
@ -336,7 +336,7 @@ class DataEntryFlowDialog extends LitElement {
          display: block;
          padding: 0;
        }
-        paper-icon-button {
+        ha-icon-button {
          display: inline-block;
          padding: 8px;
          margin: 16px 16px 0 0;
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@ -443,12 +443,6 @@ class MoreInfoClimate extends LitElement {
        color: var(--primary-text-color);
      }

-      .container-hvac_modes iron-icon,
-      .container-fan_list iron-icon,
-      .container-swing_list iron-icon {
-        margin: 22px 16px 0 0;
-      }
-
      ha-paper-dropdown-menu {
        width: 100%;
      }
--- a/src/dialogs/more-info/controls/more-info-cover.js
+++ b/src/dialogs/more-info/controls/more-info-cover.js
@ -1,5 +1,4 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
--- a/src/dialogs/more-info/controls/more-info-fan.js
+++ b/src/dialogs/more-info/controls/more-info-fan.js
@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../../components/ha-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -78,18 +78,18 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
        <div class="container-direction">
          <div class="direction">
            <div>[[localize('ui.card.fan.direction')]]</div>
-            <paper-icon-button
+            <ha-icon-button
              icon="hass:rotate-left"
              on-click="onDirectionReverse"
              title="[[localize('ui.card.fan.reverse')]]"
              disabled="[[computeIsRotatingReverse(stateObj)]]"
-            ></paper-icon-button>
-            <paper-icon-button
+            ></ha-icon-button>
+            <ha-icon-button
              icon="hass:rotate-right"
              on-click="onDirectionForward"
              title="[[localize('ui.card.fan.forward')]]"
              disabled="[[computeIsRotatingForward(stateObj)]]"
-            ></paper-icon-button>
+            ></ha-icon-button>
          </div>
        </div>
      </div>
--- a/src/dialogs/more-info/controls/more-info-light.js
+++ b/src/dialogs/more-info/controls/more-info-light.js
@ -11,6 +11,7 @@ import "../../../components/ha-labeled-slider";
 import "../../../components/ha-paper-dropdown-menu";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
+import "../../../components/ha-icon-button";

 const FEATURE_CLASS_NAMES = {
  1: "has-brightness",
@ -168,11 +169,11 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
            saturation-segments="{{saturationSegments}}"
          >
          </ha-color-picker>
-          <paper-icon-button
+          <ha-icon-button
            icon="mdi:palette"
            on-click="segmentClick"
            class="control segmentationButton"
-          ></paper-icon-button>
+          ></ha-icon-button>
        </div>

        <div class="control effect_list">
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@ -1,6 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../../components/ha-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -11,6 +10,7 @@ import { attributeClassNames } from "../../../common/entity/attribute_class_name
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-paper-dropdown-menu";
 import "../../../components/ha-paper-slider";
+import "../../../components/ha-icon";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import HassMediaPlayerEntity from "../../../util/hass-media-player-model";
@ -28,7 +28,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
          text-transform: capitalize;
        }

-        paper-icon-button[highlight] {
+        ha-icon-button[highlight] {
          color: var(--accent-color);
        }

@ -44,7 +44,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
          max-height: 40px;
        }

-        iron-icon.source-input {
+        ha-icon.source-input {
          padding: 7px;
          margin-top: 15px;
        }
@ -65,34 +65,34 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
      <div class$="[[computeClassNames(stateObj)]]">
        <div class="layout horizontal">
          <div class="flex">
-            <paper-icon-button
+            <ha-icon-button
              icon="hass:power"
              highlight$="[[playerObj.isOff]]"
              on-click="handleTogglePower"
              hidden$="[[computeHidePowerButton(playerObj)]]"
-            ></paper-icon-button>
+            ></ha-icon-button>
          </div>
          <div>
            <template
              is="dom-if"
              if="[[computeShowPlaybackControls(playerObj)]]"
            >
-              <paper-icon-button
+              <ha-icon-button
                icon="hass:skip-previous"
                on-click="handlePrevious"
                hidden$="[[!playerObj.supportsPreviousTrack]]"
-              ></paper-icon-button>
-              <paper-icon-button
+              ></ha-icon-button>
+              <ha-icon-button
                icon="[[computePlaybackControlIcon(playerObj)]]"
                on-click="handlePlaybackControl"
                hidden$="[[!computePlaybackControlIcon(playerObj)]]"
                highlight=""
-              ></paper-icon-button>
-              <paper-icon-button
+              ></ha-icon-button>
+              <ha-icon-button
                icon="hass:skip-next"
                on-click="handleNext"
                hidden$="[[!playerObj.supportsNextTrack]]"
-              ></paper-icon-button>
+              ></ha-icon-button>
            </template>
          </div>
        </div>
@ -101,36 +101,36 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
          class="volume_buttons center horizontal layout"
          hidden$="[[computeHideVolumeButtons(playerObj)]]"
        >
-          <paper-icon-button
+          <ha-icon-button
            on-click="handleVolumeTap"
            icon="hass:volume-off"
-          ></paper-icon-button>
-          <paper-icon-button
+          ></ha-icon-button>
+          <ha-icon-button
            id="volumeDown"
            disabled$="[[playerObj.isMuted]]"
            on-mousedown="handleVolumeDown"
            on-touchstart="handleVolumeDown"
            on-touchend="handleVolumeTouchEnd"
            icon="hass:volume-medium"
-          ></paper-icon-button>
-          <paper-icon-button
+          ></ha-icon-button>
+          <ha-icon-button
            id="volumeUp"
            disabled$="[[playerObj.isMuted]]"
            on-mousedown="handleVolumeUp"
            on-touchstart="handleVolumeUp"
            on-touchend="handleVolumeTouchEnd"
            icon="hass:volume-high"
-          ></paper-icon-button>
+          ></ha-icon-button>
        </div>
        <div
          class="volume center horizontal layout"
          hidden$="[[!playerObj.supportsVolumeSet]]"
        >
-          <paper-icon-button
+          <ha-icon-button
            on-click="handleVolumeTap"
            hidden$="[[playerObj.supportsVolumeButtons]]"
            icon="[[computeMuteVolumeIcon(playerObj)]]"
-          ></paper-icon-button>
+          ></ha-icon-button>
          <ha-paper-slider
            disabled$="[[playerObj.isMuted]]"
            min="0"
@ -148,7 +148,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
          class="controls layout horizontal justified"
          hidden$="[[computeHideSelectSource(playerObj)]]"
        >
-          <iron-icon class="source-input" icon="hass:login-variant"></iron-icon>
+          <ha-icon class="source-input" icon="hass:login-variant"></ha-icon>
          <ha-paper-dropdown-menu
            class="flex source-input"
            dynamic-align=""
@ -170,7 +170,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
        <!-- SOUND MODE PICKER -->
        <template is="dom-if" if="[[!computeHideSelectSoundMode(playerObj)]]">
          <div class="controls layout horizontal justified">
-            <iron-icon class="source-input" icon="hass:music-note"></iron-icon>
+            <ha-icon class="source-input" icon="hass:music-note"></ha-icon>
            <ha-paper-dropdown-menu
              class="flex source-input"
              dynamic-align
@ -202,10 +202,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
            value="{{ttsMessage}}"
            on-keydown="ttsCheckForEnter"
          ></paper-input>
-          <paper-icon-button
-            icon="hass:send"
-            on-click="sendTTS"
-          ></paper-icon-button>
+          <ha-icon-button icon="hass:send" on-click="sendTTS"></ha-icon-button>
        </div>
      </div>
    `;
--- a/src/dialogs/more-info/controls/more-info-vacuum.ts
+++ b/src/dialogs/more-info/controls/more-info-vacuum.ts
@ -1,5 +1,5 @@
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../../components/ha-icon-button";
+import "../../../components/ha-icon";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
@ -122,9 +122,7 @@ class MoreInfoVacuum extends LitElement {
          ? html`
              <div>
                <span>
-                  <iron-icon
-                    .icon=${stateObj.attributes.battery_icon}
-                  ></iron-icon>
+                  <ha-icon .icon=${stateObj.attributes.battery_icon}></ha-icon>
                  ${stateObj.attributes.battery_level}%
                </span>
              </div>
@ -147,14 +145,14 @@ class MoreInfoVacuum extends LitElement {
                ).map(
                  (item) => html`
                    <div>
-                      <paper-icon-button
+                      <ha-icon-button
                        .icon=${item.icon}
                        .entry=${item}
                        @click=${this.callService}
                        .title=${this.hass!.localize(
                          `ui.dialogs.more_info_control.vacuum.${item.translationKey}`
                        )}
-                      ></paper-icon-button>
+                      ></ha-icon-button>
                    </div>
                  `
                )}
@ -190,7 +188,7 @@ class MoreInfoVacuum extends LitElement {
                  style="justify-content: center; align-self: center; padding-top: 1.3em"
                >
                  <span>
-                    <iron-icon icon="hass:fan"></iron-icon>
+                    <ha-icon icon="hass:fan"></ha-icon>
                    ${stateObj.attributes.fan_speed}
                  </span>
                </div>
--- a/src/dialogs/more-info/controls/more-info-water_heater.js
+++ b/src/dialogs/more-info/controls/more-info-water_heater.js
@ -28,16 +28,6 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
          color: var(--primary-text-color);
        }

-        .container-away_mode,
-        .container-temperature,
-        .container-operation_list,
-
-        .has-away_mode .container-away_mode,
-        .has-target_temperature .container-temperature,
-        .has-operation_mode .container-operation_list,
-
-        .container-operation_list iron-icon,
-
        ha-paper-dropdown-menu {
          width: 100%;
        }
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@ -1,4 +1,3 @@
-import "@polymer/iron-icon/iron-icon";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
  css,
@ -10,6 +9,7 @@ import {
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { HomeAssistant } from "../../../types";
+import "../../../components/ha-icon";

 const cardinalDirections = [
  "N",
@ -79,7 +79,7 @@ class MoreInfoWeather extends LitElement {

    return html`
      <div class="flex">
-        <iron-icon icon="hass:thermometer"></iron-icon>
+        <ha-icon icon="hass:thermometer"></ha-icon>
        <div class="main">
          ${this.hass.localize("ui.card.weather.attributes.temperature")}
        </div>
@ -90,7 +90,7 @@ class MoreInfoWeather extends LitElement {
      ${this._showValue(this.stateObj.attributes.pressure)
        ? html`
            <div class="flex">
-              <iron-icon icon="hass:gauge"></iron-icon>
+              <ha-icon icon="hass:gauge"></ha-icon>
              <div class="main">
                ${this.hass.localize("ui.card.weather.attributes.air_pressure")}
              </div>
@ -104,7 +104,7 @@ class MoreInfoWeather extends LitElement {
      ${this._showValue(this.stateObj.attributes.humidity)
        ? html`
            <div class="flex">
-              <iron-icon icon="hass:water-percent"></iron-icon>
+              <ha-icon icon="hass:water-percent"></ha-icon>
              <div class="main">
                ${this.hass.localize("ui.card.weather.attributes.humidity")}
              </div>
@ -115,7 +115,7 @@ class MoreInfoWeather extends LitElement {
      ${this._showValue(this.stateObj.attributes.wind_speed)
        ? html`
            <div class="flex">
-              <iron-icon icon="hass:weather-windy"></iron-icon>
+              <ha-icon icon="hass:weather-windy"></ha-icon>
              <div class="main">
                ${this.hass.localize("ui.card.weather.attributes.wind_speed")}
              </div>
@ -131,7 +131,7 @@ class MoreInfoWeather extends LitElement {
      ${this._showValue(this.stateObj.attributes.visibility)
        ? html`
            <div class="flex">
-              <iron-icon icon="hass:eye"></iron-icon>
+              <ha-icon icon="hass:eye"></ha-icon>
              <div class="main">
                ${this.hass.localize("ui.card.weather.attributes.visibility")}
              </div>
@ -151,9 +151,9 @@ class MoreInfoWeather extends LitElement {
                <div class="flex">
                  ${item.condition
                    ? html`
-                        <iron-icon
+                        <ha-icon
                          .icon="${weatherIcons[item.condition]}"
-                        ></iron-icon>
+                        ></ha-icon>
                      `
                    : ""}
                  ${!this._showValue(item.templow)
@ -193,7 +193,7 @@ class MoreInfoWeather extends LitElement {

  static get styles(): CSSResult {
    return css`
-      iron-icon {
+      ha-icon {
        color: var(--paper-item-icon-color);
      }
      .section {
--- a/src/dialogs/more-info/more-info-controls.js
+++ b/src/dialogs/more-info/more-info-controls.js
@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../components/ha-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -78,27 +78,27 @@ class MoreInfoControls extends LocalizeMixin(EventsMixin(PolymerElement)) {
      </style>

      <app-toolbar>
-        <paper-icon-button
+        <ha-icon-button
          aria-label$="[[localize('ui.dialogs.more_info_control.dismiss')]]"
          icon="hass:close"
          dialog-dismiss
-        ></paper-icon-button>
+        ></ha-icon-button>
        <div class="main-title" main-title="" on-click="enlarge">
          [[_computeStateName(stateObj)]]
        </div>
        <template is="dom-if" if="[[_computeConfig(hass)]]">
-          <paper-icon-button
+          <ha-icon-button
            aria-label$="[[localize('ui.dialogs.more_info_control.settings')]]"
            icon="hass:settings"
            on-click="_gotoSettings"
-          ></paper-icon-button>
+          ></ha-icon-button>
        </template>
        <template is="dom-if" if="[[_computeEdit(hass, stateObj)]]">
-          <paper-icon-button
+          <ha-icon-button
            aria-label$="[[localize('ui.dialogs.more_info_control.edit')]]"
            icon="hass:pencil"
            on-click="_gotoEdit"
-          ></paper-icon-button>
+          ></ha-icon-button>
        </template>
      </app-toolbar>

--- a/src/dialogs/notifications/notification-drawer.js
+++ b/src/dialogs/notifications/notification-drawer.js
@ -1,12 +1,11 @@
 import "@material/mwc-button";
 import "@polymer/app-layout/app-drawer/app-drawer";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeDomain } from "../../common/entity/compute_domain";
-import "../../components/ha-paper-icon-button-prev";
+import "../../components/ha-icon-button-prev";
 import { subscribeNotifications } from "../../data/persistent_notification";
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
@ -51,7 +50,7 @@ export class HuiNotificationDrawer extends EventsMixin(
    <app-drawer id="drawer" opened="{{open}}" disable-swipe align="start">
      <app-toolbar>
        <div main-title>[[localize('ui.notification_drawer.title')]]</div>
-        <ha-paper-icon-button-prev on-click="_closeDrawer" aria-label$="[[localize('ui.notification_drawer.close')]]"></paper-icon-button>
+        <ha-icon-button-prev on-click="_closeDrawer" aria-label$="[[localize('ui.notification_drawer.close')]]"></ha-icon-button-prev>
      </app-toolbar>
      <div class="notifications">
        <template is="dom-if" if="[[!_empty(notifications)]]">
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@ -1,7 +1,6 @@
-import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import type { PaperDialogScrollableElement } from "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../components/ha-icon-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
@ -176,12 +175,12 @@ export class HaVoiceCommandDialog extends LitElement {
                          </div>
                        `
                      : ""}
-                    <paper-icon-button
+                    <ha-icon-button
                      .active=${Boolean(this.results)}
                      icon="hass:microphone"
                      @click=${this._toggleListening}
                    >
-                    </paper-icon-button>
+                    </ha-icon-button>
                  </span>
                `
              : ""}
@ -369,11 +368,11 @@ export class HaVoiceCommandDialog extends LitElement {
          z-index: 103;
        }

-        paper-icon-button {
+        ha-icon-button {
          color: var(--secondary-text-color);
        }

-        paper-icon-button[active] {
+        ha-icon-button[active] {
          color: var(--primary-color);
        }

--- a/src/entrypoints/app.ts
+++ b/src/entrypoints/app.ts
@ -2,9 +2,6 @@
 /* eslint-disable import/first */
 import "@polymer/paper-styles/typography";
 import { setPassiveTouchGestures } from "@polymer/polymer/lib/utils/settings";
-// For MDI icons. Needs to be part of main bundle or else it won't hook
-// properly into iron-meta, which is used to transfer iconsets to iron-icon.
-import "../components/ha-iconset-svg";
 import "../layouts/home-assistant";
 import "../resources/html-import/polyfill";
 import "../resources/roboto";
--- a/src/entrypoints/authorize.ts
+++ b/src/entrypoints/authorize.ts
@ -1,7 +1,6 @@
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../auth/ha-authorize";
-import "../components/ha-iconset-svg";
 import "../resources/ha-style";
 import "../resources/roboto";

--- a/src/entrypoints/hass-icons.ts
+++ b/src/entrypoints/hass-icons.ts
@ -1 +0,0 @@
-import "../resources/hass-icons";
--- a/src/entrypoints/onboarding.ts
+++ b/src/entrypoints/onboarding.ts
@ -1,4 +1,3 @@
-import "../components/ha-iconset-svg";
 import "../onboarding/ha-onboarding";
 import "../resources/ha-style";
 import "../resources/roboto";
--- a/src/html/authorize.html.template
+++ b/src/html/authorize.html.template
@ -49,7 +49,6 @@

    <script type="module" crossorigin="use-credentials">
      import "<%= latestPageJS %>";
-      import "<%= latestHassIconsJS %>";
      window.providersPromise = fetch("/auth/providers", {
        credentials: "same-origin",
      });
@ -62,7 +61,6 @@
          _ls("/static/polyfills/custom-elements-es5-adapter.js");
          _ls("<%= es5Compatibility %>");
          _ls("<%= es5PageJS %>");
-          _ls("<%= es5HassIconsJS %>");
        }
      })();
    </script>
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@ -65,7 +65,6 @@
    <script type="module" crossorigin="use-credentials">
      import "<%= latestCoreJS %>";
      import "<%= latestAppJS %>";
-      import "<%= latestHassIconsJS %>";
      window.customPanelJS = "<%= latestCustomPanelJS %>";
    </script>
    {% for extra_module in extra_modules -%}
@ -82,7 +81,6 @@
          _ls("<%= es5Compatibility %>");
          _ls("<%= es5CoreJS %>");
          _ls("<%= es5AppJS %>");
-          _ls("<%= es5HassIconsJS %>");
          {% for extra_script in extra_js_es5 -%}
          _ls("{{ extra_script }}");
          {% endfor -%}
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@ -51,7 +51,6 @@

    <script type="module" crossorigin="use-credentials">
      import "<%= latestPageJS %>";
-      import "<%= latestHassIconsJS %>";
      window.stepsPromise = fetch("/api/onboarding", {
        credentials: "same-origin",
      });
@ -64,7 +63,6 @@
          _ls("/static/polyfills/custom-elements-es5-adapter.js");
          _ls("<%= es5Compatibility %>");
          _ls("<%= es5PageJS %>");
-          _ls("<%= es5HassIconsJS %>");
        }
      })();
    </script>
--- a/src/layouts/hass-loading-screen.ts
+++ b/src/layouts/hass-loading-screen.ts
@ -10,7 +10,7 @@ import {
  TemplateResult,
 } from "lit-element";
 import "../components/ha-menu-button";
-import "../components/ha-paper-icon-button-arrow-prev";
+import "../components/ha-icon-button-arrow-prev";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";

@ -33,9 +33,9 @@ class HassLoadingScreen extends LitElement {
              ></ha-menu-button>
            `
          : html`
-              <ha-paper-icon-button-arrow-prev
+              <ha-icon-button-arrow-prev
                @click=${this._handleBack}
-              ></ha-paper-icon-button-arrow-prev>
+              ></ha-icon-button-arrow-prev>
            `}
      </app-toolbar>
      <div class="content">
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@ -9,7 +9,7 @@ import {
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import "../components/ha-menu-button";
-import "../components/ha-paper-icon-button-arrow-prev";
+import "../components/ha-icon-button-arrow-prev";

@customElement("hass-subpage")
 class HassSubpage extends LitElement {
@ -25,12 +25,11 @@ class HassSubpage extends LitElement {
  protected render(): TemplateResult {
    return html`
      <div class="toolbar">
-        <ha-paper-icon-button-arrow-prev
+        <ha-icon-button-arrow-prev
          aria-label="Back"
-          .hassio=${this.hassio}
          @click=${this._backTapped}
          class=${classMap({ hidden: !this.showBackButton })}
-        ></ha-paper-icon-button-arrow-prev>
+        ></ha-icon-button-arrow-prev>

        <div main-title>${this.header}</div>
        <slot name="toolbar-icon"></slot>
@ -66,12 +65,12 @@ class HassSubpage extends LitElement {
      }

      ha-menu-button,
-      ha-paper-icon-button-arrow-prev,
+      ha-icon-button-arrow-prev,
      ::slotted([slot="toolbar-icon"]) {
        pointer-events: auto;
      }

-      ha-paper-icon-button-arrow-prev.hidden {
+      ha-icon-button-arrow-prev.hidden {
        visibility: hidden;
      }

--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@ -14,7 +14,7 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { navigate } from "../common/navigate";
 import "../components/ha-menu-button";
-import "../components/ha-paper-icon-button-arrow-prev";
+import "../components/ha-icon-button-arrow-prev";
 import { HomeAssistant, Route } from "../types";
 import "../components/ha-icon";

@ -125,11 +125,10 @@ class HassTabsSubpage extends LitElement {
              ></ha-menu-button>
            `
          : html`
-              <ha-paper-icon-button-arrow-prev
+              <ha-icon-button-arrow-prev
                aria-label="Back"
-                .hassio=${this.hassio}
                @click=${this._backTapped}
-              ></ha-paper-icon-button-arrow-prev>
+              ></ha-icon-button-arrow-prev>
            `}
        ${this.narrow
          ? html` <div class="main-title"><slot name="header"></slot></div> `
@ -246,7 +245,7 @@ class HassTabsSubpage extends LitElement {
      }

      ha-menu-button,
-      ha-paper-icon-button-arrow-prev,
+      ha-icon-button-arrow-prev,
      ::slotted([slot="toolbar-icon"]) {
        flex-shrink: 0;
        pointer-events: auto;
--- a/src/onboarding/action-badge.ts
+++ b/src/onboarding/action-badge.ts
@ -22,7 +22,7 @@ class ActionBadge extends LitElement {
  protected render(): TemplateResult {
    return html`
      <div class="icon">
-        <iron-icon .icon=${this.icon}></iron-icon>
+        <ha-icon .icon=${this.icon}></ha-icon>
        ${this.badgeIcon
          ? html` <ha-icon class="badge" .icon=${this.badgeIcon}></ha-icon> `
          : ""}
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/src/panels/config/areas/ha-config-area-page.ts
@ -104,12 +104,12 @@ class HaConfigAreaPage extends LitElement {
            `
          : ""}

-        <paper-icon-button
+        <ha-icon-button
          slot="toolbar-icon"
          icon="hass:settings"
          .entry=${area}
          @click=${this._showSettings}
-        ></paper-icon-button>
+        ></ha-icon-button>

        <div class="container">
          ${!this.narrow
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/src/panels/config/areas/ha-config-areas-dashboard.ts
@ -114,11 +114,11 @@ export class HaConfigAreasDashboard extends LitElement {
        id="area_id"
        hasFab
      >
-        <paper-icon-button
+        <ha-icon-button
          slot="toolbar-icon"
          icon="hass:help-circle"
          @click=${this._showHelp}
-        ></paper-icon-button>
+        ></ha-icon-button>
      </hass-tabs-subpage-data-table>
      <ha-fab
        ?is-wide=${this.isWide}
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@ -1,5 +1,5 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../../../components/ha-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
@ -96,18 +96,18 @@ export default class HaAutomationActionRow extends LitElement {
          <div class="card-menu">
            ${this.index !== 0
              ? html`
-                  <paper-icon-button
+                  <ha-icon-button
                    icon="hass:arrow-up"
                    @click=${this._moveUp}
-                  ></paper-icon-button>
+                  ></ha-icon-button>
                `
              : ""}
            ${this.index !== this.totalActions - 1
              ? html`
-                  <paper-icon-button
+                  <ha-icon-button
                    icon="hass:arrow-down"
                    @click=${this._moveDown}
-                  ></paper-icon-button>
+                  ></ha-icon-button>
                `
              : ""}
            <paper-menu-button
@ -117,10 +117,10 @@ export default class HaAutomationActionRow extends LitElement {
              vertical-offset="-5"
              close-on-activate
            >
-              <paper-icon-button
+              <ha-icon-button
                icon="hass:dots-vertical"
                slot="dropdown-trigger"
-              ></paper-icon-button>
+              ></ha-icon-button>
              <paper-listbox slot="dropdown-content">
                <paper-item
                  @tap=${this._switchYamlMode}
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@ -1,4 +1,4 @@
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../../../components/ha-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-menu-button/paper-menu-button";
 import {
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@ -1,6 +1,6 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-icon-button/paper-icon-button";
+import "../../../components/ha-icon-button";
 import {
  css,
  CSSResult,
@ -15,7 +15,6 @@ import { navigate } from "../../../common/navigate";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
-import "../../../components/ha-paper-icon-button-arrow-prev";
 import {
  AutomationConfig,
  AutomationEntity,
@ -78,14 +77,14 @@ export class HaAutomationEditor extends LitElement {
        ${!this.automationId
          ? ""
          : html`
-              <paper-icon-button
+              <ha-icon-button
                slot="toolbar-icon"
                title="${this.hass.localize(
                  "ui.panel.config.automation.picker.delete_automation"
                )}"
                icon="hass:delete"
                @click=${this._deleteConfirm}
-              ></paper-icon-button>
+              ></ha-icon-button>
            `}
        ${this._config
          ? html`
--- a/Show More
+++ b/Show More