From 66b80a047aec6c88d06c6525ac78f7c5390eb19f Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 17 Apr 2018 23:42:03 -0400
Subject: [PATCH 01/14] Allow generating iconset for HASS icons

---
 gulp/tasks/hass-icons.js | 58 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 gulp/tasks/hass-icons.js

diff --git a/gulp/tasks/hass-icons.js b/gulp/tasks/hass-icons.js
new file mode 100644
index 000000000000..2204dc05fa27
--- /dev/null
+++ b/gulp/tasks/hass-icons.js
@@ -0,0 +1,58 @@
+const gulp = require('gulp');
+const path = require('path');
+const fs = require('fs');
+const parse5 = require('parse5');
+
+const iconRegEx = /mdi:[\w-]+/g;
+
+function mapFiles(startPath, filter, mapFunc) {
+  const files = fs.readdirSync(startPath);
+  for (let i = 0; i < files.length; i++) {
+    const filename = path.join(startPath, files[i]);
+    const stat = fs.lstatSync(filename);
+    if (stat.isDirectory()) {
+      mapFiles(filename, filter, mapFunc);
+    } else if (filename.indexOf(filter) >= 0) {
+      mapFunc(filename);
+    }
+  }
+}
+
+
+function findIcons() {
+  const icons = new Set();
+  function processFile(filename) {
+    const content = fs.readFileSync(filename);
+    let match;
+    while (match = iconRegEx.exec(content)) {
+      icons.add(match[0].substr(4));
+    };
+  }
+  mapFiles('src', '.html', processFile);
+  mapFiles('panels', '.html', processFile);
+  mapFiles('hassio', '.html', processFile);
+  mapFiles('js', '.js', processFile);
+  return icons;
+}
+
+async function generateHassIcons() {
+  const icons = findIcons();
+
+  const iconDoc = parse5.parseFragment(
+    fs.readFileSync('hass_frontend/mdi.html', { encoding: 'utf-8' }));
+
+  const ironIconset = iconDoc.childNodes[0];
+  ironIconset.attrs.forEach(attr => {
+    if (attr.name == 'name') {
+      attr.value = 'hass';
+    }
+  });
+
+  const defs = ironIconset.childNodes[0].childNodes[0];
+  defs.childNodes = defs.childNodes.filter(icon => icons.has(icon.attrs[0].value));
+
+  fs.writeFileSync('hass_frontend/hass_icons.html', parse5.serialize(iconDoc));
+  console.log(`Home Assistant has ${icons.size} icons.`);
+}
+
+gulp.task('gen-hass-icons', generateHassIcons);

From 343cca8c4cdc70f547608765b205e1196b91f109 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 19 Apr 2018 23:00:33 -0400
Subject: [PATCH 02/14] Lint

---
 gulp/tasks/hass-icons.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/gulp/tasks/hass-icons.js b/gulp/tasks/hass-icons.js
index 2204dc05fa27..c8a63f53fef8 100644
--- a/gulp/tasks/hass-icons.js
+++ b/gulp/tasks/hass-icons.js
@@ -24,9 +24,10 @@ function findIcons() {
   function processFile(filename) {
     const content = fs.readFileSync(filename);
     let match;
+    // eslint-disable-next-line
     while (match = iconRegEx.exec(content)) {
       icons.add(match[0].substr(4));
-    };
+    }
   }
   mapFiles('src', '.html', processFile);
   mapFiles('panels', '.html', processFile);
@@ -38,12 +39,11 @@ function findIcons() {
 async function generateHassIcons() {
   const icons = findIcons();
 
-  const iconDoc = parse5.parseFragment(
-    fs.readFileSync('hass_frontend/mdi.html', { encoding: 'utf-8' }));
+  const iconDoc = parse5.parseFragment(fs.readFileSync('hass_frontend/mdi.html', { encoding: 'utf-8' }));
 
   const ironIconset = iconDoc.childNodes[0];
-  ironIconset.attrs.forEach(attr => {
-    if (attr.name == 'name') {
+  ironIconset.attrs.forEach((attr) => {
+    if (attr.name === 'name') {
       attr.value = 'hass';
     }
   });

From fd731676310d8bd1f7b11d48f82acf9fde5119b2 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 19 Apr 2018 23:22:40 -0400
Subject: [PATCH 03/14] Load mdi on demand

---
 index.html                               |   2 +-
 src/components/entity/ha-state-icon.html |   4 +-
 src/components/ha-icon.html              | 209 +++++++++++++++++++++++
 src/components/ha-sidebar.html           |  21 +--
 4 files changed, 223 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ha-icon.html

diff --git a/index.html b/index.html
index e26d966fac40..b0976de5ffd5 100644
--- a/index.html
+++ b/index.html
@@ -107,7 +107,7 @@
     {% if panel_url -%}
       <link rel='import' href='{{ panel_url }}' async>
     {% endif -%}
-    <link rel='import' href='/home-assistant-polymer/hass_frontend/mdi.html' async>
+    <link rel='import' href='/home-assistant-polymer/hass_frontend/hass_icons.html' async>
     {% for extra_url in extra_urls -%}
       <link rel='import' href='{{ extra_url }}' async>
     {% endfor -%}
diff --git a/src/components/entity/ha-state-icon.html b/src/components/entity/ha-state-icon.html
index beaf990185a6..bf00eef39d13 100644
--- a/src/components/entity/ha-state-icon.html
+++ b/src/components/entity/ha-state-icon.html
@@ -1,10 +1,10 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
 
-<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../ha-icon.html">
 
 <dom-module id="ha-state-icon">
   <template>
-    <iron-icon icon="[[computeIcon(stateObj)]]"></iron-icon>
+    <ha-icon icon="[[computeIcon(stateObj)]]"></ha-icon>
   </template>
 </dom-module>
 
diff --git a/src/components/ha-icon.html b/src/components/ha-icon.html
new file mode 100644
index 000000000000..93e3e41a9243
--- /dev/null
+++ b/src/components/ha-icon.html
@@ -0,0 +1,209 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/iron-meta/iron-meta.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+
+<!--
+
+The `iron-icon` element displays an icon. By default an icon renders as a 24px square.
+
+Example using src:
+
+    <iron-icon src="star.png"></iron-icon>
+
+Example setting size to 32px x 32px:
+
+    <iron-icon class="big" src="big_star.png"></iron-icon>
+
+    <style is="custom-style">
+      .big {
+        --iron-icon-height: 32px;
+        --iron-icon-width: 32px;
+      }
+    </style>
+
+The iron elements include several sets of icons.
+To use the default set of icons, import `iron-icons.html` and use the `icon` attribute to specify an icon:
+
+    <link rel="import" href="/components/iron-icons/iron-icons.html">
+
+    <iron-icon icon="menu"></iron-icon>
+
+To use a different built-in set of icons, import the specific `iron-icons/<iconset>-icons.html`, and
+specify the icon as `<iconset>:<icon>`. For example, to use a communication icon, you would
+use:
+
+    <link rel="import" href="/components/iron-icons/communication-icons.html">
+
+    <iron-icon icon="communication:email"></iron-icon>
+
+You can also create custom icon sets of bitmap or SVG icons.
+
+Example of using an icon named `cherry` from a custom iconset with the ID `fruit`:
+
+    <iron-icon icon="fruit:cherry"></iron-icon>
+
+See [iron-iconset](iron-iconset) and [iron-iconset-svg](iron-iconset-svg) for more information about
+how to create a custom iconset.
+
+See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons available
+in the various iconsets.
+
+To load a subset of icons from one of the default `iron-icons` sets, you can
+use the [poly-icon](https://poly-icon.appspot.com/) tool. It allows you
+to select individual icons, and creates an iconset from them that you can
+use directly in your elements.
+
+### Styling
+
+The following custom properties are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--iron-icon` | Mixin applied to the icon | {}
+`--iron-icon-width` | Width of the icon | `24px`
+`--iron-icon-height` | Height of the icon | `24px`
+`--iron-icon-fill-color` | Fill color of the svg icon | `currentcolor`
+`--iron-icon-stroke-color` | Stroke color of the svg icon | none
+
+@group Iron Elements
+@element iron-icon
+@demo demo/index.html
+@hero hero.svg
+@homepage polymer.github.io
+-->
+
+<dom-module id="ha-icon">
+  <template>
+    <style>
+      :host {
+        @apply --layout-inline;
+        @apply --layout-center-center;
+        position: relative;
+
+        vertical-align: middle;
+
+        fill: var(--iron-icon-fill-color, currentcolor);
+        stroke: var(--iron-icon-stroke-color, none);
+
+        width: var(--iron-icon-width, 24px);
+        height: var(--iron-icon-height, 24px);
+        @apply --iron-icon;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+    </style>
+  </template>
+
+  <script>
+    /* eslint-disable */
+    Polymer({
+
+      is: 'ha-icon',
+
+      properties: {
+
+        /**
+         * The name of the icon to use. The name should be of the form:
+         * `iconset_name:icon_name`.
+         */
+        icon: {type: String},
+
+        /**
+         * The name of the theme to used, if one is specified by the
+         * iconset.
+         */
+        theme: {type: String},
+
+        /**
+         * If using iron-icon without an iconset, you can set the src to be
+         * the URL of an individual icon image file. Note that this will take
+         * precedence over a given icon attribute.
+         */
+        src: {type: String},
+
+        /**
+         * @type {!Polymer.IronMeta}
+         */
+        _meta: {value: Polymer.Base.create('iron-meta', {type: 'iconset'})}
+
+      },
+
+      observers: [
+        '_updateIcon(_meta, isAttached)',
+        '_updateIcon(theme, isAttached)',
+        '_srcChanged(src, isAttached)',
+        '_iconChanged(icon, isAttached)'
+      ],
+
+      _DEFAULT_ICONSET: 'icons',
+
+      _iconChanged: function(icon) {
+        var parts = (icon || '').split(':');
+        this._iconName = parts.pop();
+        this._iconsetName = parts.pop() || this._DEFAULT_ICONSET;
+        this._updateIcon();
+      },
+
+      _srcChanged: function(src) {
+        this._updateIcon();
+      },
+
+      _usesIconset: function() {
+        return this.icon || !this.src;
+      },
+
+      /** @suppress {visibility} */
+      _updateIcon: function() {
+        if (this._usesIconset()) {
+          if (this._img && this._img.parentNode) {
+            Polymer.dom(this.root).removeChild(this._img);
+          }
+          if (this._iconName === '') {
+            if (this._iconset) {
+              this._iconset.removeIcon(this);
+            }
+          } else if (this._iconsetName && this._meta) {
+            this._iconset = /** @type {?Polymer.Iconset} */ (
+                this._meta.byKey(this._iconsetName));
+            if (this._iconset) {
+              this._iconset.applyIcon(this, this._iconName, this.theme);
+              this.unlisten(window, 'iron-iconset-added', '_updateIcon');
+            } else {
+              this.listen(window, 'iron-iconset-added', '_updateIcon');
+              if (this._iconsetName === 'mdi' && !window.MDI_LOADED) {
+                window.MDI_LOADED = true;
+                Polymer.importHref('/static/mdi.html');
+              }
+            }
+          }
+        } else {
+          if (this._iconset) {
+            this._iconset.removeIcon(this);
+          }
+          if (!this._img) {
+            this._img = document.createElement('img');
+            this._img.style.width = '100%';
+            this._img.style.height = '100%';
+            this._img.draggable = false;
+          }
+          this._img.src = this.src;
+          Polymer.dom(this.root).appendChild(this._img);
+        }
+      }
+
+    });
+  </script>
+
+</dom-module>
diff --git a/src/components/ha-sidebar.html b/src/components/ha-sidebar.html
index 57946ec062e6..a30adb5fedeb 100644
--- a/src/components/ha-sidebar.html
+++ b/src/components/ha-sidebar.html
@@ -8,6 +8,7 @@
 
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 
+<link rel='import' href='../components/ha-icon.html'>
 <link rel='import' href='../util/hass-mixins.html'>
 <link rel='import' href='../util/hass-translation.html'>
 
@@ -95,24 +96,24 @@
 
     <app-toolbar>
       <div main-title>Home Assistant</div>
-      <paper-icon-button icon='mdi:chevron-left' hidden$='[[narrow]]' on-click='toggleMenu'></paper-icon-button>
+      <paper-icon-button icon='hass:chevron-left' hidden$='[[narrow]]' on-click='toggleMenu'></paper-icon-button>
     </app-toolbar>
 
     <paper-listbox attr-for-selected='data-panel' selected='[[hass.panelUrl]]'>
       <paper-icon-item on-click='menuClicked' data-panel='states'>
-        <iron-icon slot="item-icon" icon='mdi:apps'></iron-icon>
+        <iron-icon slot="item-icon" icon='hass:apps'></iron-icon>
         <span class='item-text'>[[localize('panel.states')]]</span>
       </paper-icon-item>
 
       <template is='dom-repeat' items='[[panels]]'>
         <paper-icon-item on-click='menuClicked' data-panel$='[[item.url_path]]'>
-          <iron-icon slot="item-icon" icon='[[item.icon]]'></iron-icon>
+          <ha-icon slot="item-icon" icon='[[item.icon]]'></ha-icon>
           <span class='item-text'>[[computePanelName(localize, item)]]</span>
         </paper-icon-item>
       </template>
 
       <paper-icon-item on-click='menuClicked' data-panel='logout' class='logout'>
-        <iron-icon slot="item-icon" icon='mdi:exit-to-app'></iron-icon>
+        <iron-icon slot="item-icon" icon='hass:exit-to-app'></iron-icon>
         <span class='item-text'>[[localize('ui.sidebar.log_out')]]</span>
       </paper-icon-item>
     </paper-listbox>
@@ -124,29 +125,29 @@
 
       <div class='dev-tools layout horizontal justified'>
         <paper-icon-button
-          icon='mdi:remote' data-panel='dev-service'
+          icon='hass:remote' data-panel='dev-service'
           alt="[[localize('panel.dev-services')]]" title="[[localize('panel.dev-services')]]"
           on-click='menuClicked'></paper-icon-button>
         <paper-icon-button
-          icon='mdi:code-tags' data-panel='dev-state'
+          icon='hass:code-tags' data-panel='dev-state'
           alt="[[localize('panel.dev-states')]]" title="[[localize('panel.dev-states')]]"
           on-click='menuClicked'></paper-icon-button>
         <paper-icon-button
-          icon='mdi:radio-tower' data-panel='dev-event'
+          icon='hass:radio-tower' data-panel='dev-event'
           alt="[[localize('panel.dev-events')]]" title="[[localize('panel.dev-events')]]"
           on-click='menuClicked'></paper-icon-button>
         <paper-icon-button
-          icon='mdi:file-xml' data-panel='dev-template'
+          icon='hass:file-xml' data-panel='dev-template'
           alt="[[localize('panel.dev-templates')]]" title="[[localize('panel.dev-templates')]]"
           on-click='menuClicked'></paper-icon-button>
         <template is='dom-if' if='[[_mqttLoaded(hass)]]'>
           <paper-icon-button
-            icon='mdi:altimeter' data-panel='dev-mqtt'
+            icon='hass:altimeter' data-panel='dev-mqtt'
             alt="[[localize('panel.dev-mqtt')]]" title="[[localize('panel.dev-mqtt')]]"
             on-click='menuClicked'></paper-icon-button>
         </template>
         <paper-icon-button
-          icon='mdi:information-outline' data-panel='dev-info'
+          icon='hass:information-outline' data-panel='dev-info'
           alt="[[localize('panel.dev-info')]]" title="[[localize('panel.dev-info')]]"
           on-click='menuClicked'></paper-icon-button>
       </div>

From 1d29291ba9106301fdefe0f88a2b57e6ff4414dc Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 19 Apr 2018 23:22:46 -0400
Subject: [PATCH 04/14] mdi -> hass

---
 gulp/tasks/hass-icons.js                      |   5 +-
 .../addon-store/hassio-addon-repository.html  |   2 +-
 .../hassio-repositories-editor.html           |   4 +-
 hassio/addon-view/hassio-addon-info.html      |  10 +-
 hassio/addon-view/hassio-addon-view.html      |   6 +-
 hassio/dashboard/hassio-addons.html           |   2 +-
 hassio/dashboard/hassio-hass-update.html      |   6 +-
 hassio/hassio-markdown-dialog.html            |   2 +-
 hassio/hassio-pages-with-tabs.html            |   6 +-
 hassio/snapshots/hassio-snapshot.html         |   6 +-
 hassio/snapshots/hassio-snapshots.html        |   2 +-
 .../automation/ha-automation-editor.html      |   4 +-
 .../automation/ha-automation-picker.html      |   6 +-
 .../config/cloud/ha-config-cloud-login.html   |   4 +-
 panels/config/core/ha-config-core.html        |   2 +-
 .../config/customize/ha-config-customize.html |   2 +-
 .../customize/ha-customize-attribute.html     |   2 +-
 .../customize/types/ha-customize-icon.html    |   2 +-
 .../dashboard/ha-config-cloud-menu.html       |   2 +-
 .../dashboard/ha-config-entries-menu.html     |   2 +-
 .../dashboard/ha-config-navigation.html       |   2 +-
 panels/config/script/ha-script-editor.html    |   4 +-
 panels/config/script/ha-script-picker.html    |   6 +-
 panels/config/zwave/ha-config-zwave.html      |   4 +-
 panels/config/zwave/zwave-network.html        |   2 +-
 panels/dev-info/ha-panel-dev-info.html        |   2 +-
 panels/dev-state/ha-panel-dev-state.html      |   2 +-
 panels/logbook/ha-panel-logbook.html          |   2 +-
 panels/mailbox/ha-panel-mailbox.html          |   2 +-
 .../shopping-list/ha-panel-shopping-list.html |   4 +-
 src/cards/ha-media_player-card.html           |  12 +-
 src/cards/ha-plant-card.html                  |  10 +-
 src/components/entity/ha-entity-picker.html   |   4 +-
 src/components/entity/ha-entity-toggle.html   |   4 +-
 .../entity/ha-state-label-badge.html          |  16 +-
 src/components/ha-climate-control.html        |   4 +-
 src/components/ha-combo-box.html              |   4 +-
 src/components/ha-cover-controls.html         |   6 +-
 src/components/ha-cover-tilt-controls.html    |   6 +-
 src/components/ha-demo-badge.html             |   2 +-
 src/components/ha-menu-button.html            |   2 +-
 src/components/ha-start-voice-button.html     |   2 +-
 src/components/hassio-card-content.html       |   4 +-
 src/dialogs/ha-voice-command-dialog.html      |   2 +-
 .../more-info/controls/more-info-fan.html     |   4 +-
 .../more-info/controls/more-info-light.html   |   6 +-
 .../controls/more-info-media_player.html      |  22 +--
 .../more-info/controls/more-info-vacuum.html  |  12 +-
 src/dialogs/more-info/more-info-controls.html |   4 +-
 src/dialogs/more-info/more-info-settings.html |   2 +-
 src/layouts/hass-subpage.html                 |   2 +-
 src/util/hass-util.html                       | 142 +++++++++---------
 52 files changed, 190 insertions(+), 189 deletions(-)

diff --git a/gulp/tasks/hass-icons.js b/gulp/tasks/hass-icons.js
index c8a63f53fef8..a1c084bd1132 100644
--- a/gulp/tasks/hass-icons.js
+++ b/gulp/tasks/hass-icons.js
@@ -3,7 +3,7 @@ const path = require('path');
 const fs = require('fs');
 const parse5 = require('parse5');
 
-const iconRegEx = /mdi:[\w-]+/g;
+const iconRegEx = /hass:[\w-]+/g;
 
 function mapFiles(startPath, filter, mapFunc) {
   const files = fs.readdirSync(startPath);
@@ -26,7 +26,8 @@ function findIcons() {
     let match;
     // eslint-disable-next-line
     while (match = iconRegEx.exec(content)) {
-      icons.add(match[0].substr(4));
+      // strip off "hass:" and add to set
+      icons.add(match[0].substr(5));
     }
   }
   mapFiles('src', '.html', processFile);
diff --git a/hassio/addon-store/hassio-addon-repository.html b/hassio/addon-store/hassio-addon-repository.html
index 36b9c87c3c92..ed0fdd72f90f 100644
--- a/hassio/addon-store/hassio-addon-repository.html
+++ b/hassio/addon-store/hassio-addon-repository.html
@@ -60,7 +60,7 @@
   }
 
   computeIcon(addon) {
-    return addon.installed && addon.installed !== addon.version ? 'mdi:arrow-up-bold-circle' : 'mdi:puzzle';
+    return addon.installed && addon.installed !== addon.version ? 'hass:arrow-up-bold-circle' : 'hass:puzzle';
   }
 
   computeIconTitle(addon) {
diff --git a/hassio/addon-store/hassio-repositories-editor.html b/hassio/addon-store/hassio-repositories-editor.html
index 887d4fcbdcb1..04edb92839f2 100644
--- a/hassio/addon-store/hassio-repositories-editor.html
+++ b/hassio/addon-store/hassio-repositories-editor.html
@@ -37,7 +37,7 @@
             <hassio-card-content
               title='[[repo.name]]'
               description='[[repo.url]]'
-              icon='mdi:github-circle'
+              icon='hass:github-circle'
             ></hassio-card-content>
           </div>
           <div class='card-actions'>
@@ -52,7 +52,7 @@
       </template>
       <paper-card>
         <div class='card-content add'>
-          <iron-icon icon='mdi:github-circle'></iron-icon>
+          <iron-icon icon='hass:github-circle'></iron-icon>
           <paper-input label='Add new repository by URL' value='{{repoUrl}}'></paper-input>
         </div>
         <div class='card-actions'>
diff --git a/hassio/addon-view/hassio-addon-info.html b/hassio/addon-view/hassio-addon-info.html
index bfb8b9e4baa7..1b4d4445bb07 100644
--- a/hassio/addon-view/hassio-addon-info.html
+++ b/hassio/addon-view/hassio-addon-info.html
@@ -52,11 +52,11 @@
       }
       iron-icon.stopped {
         color: var(--google-red-300);
-      }      
+      }
       ha-call-api-button {
         font-weight: 500;
         color: var(--primary-color);
-      }      
+      }
       .right {
         float: right;
       }
@@ -67,7 +67,7 @@
           <hassio-card-content
             title='[[addon.name]] [[addon.last_version]] is available'
             description='You are currently running version [[addon.version]]'
-            icon='mdi:arrow-up-bold-circle'
+            icon='hass:arrow-up-bold-circle'
             icon-class='update'
           ></hassio-card-content>
         </div>
@@ -93,14 +93,14 @@
                 <iron-icon
                   title='Add-on is running'
                   class='running'
-                  icon='mdi:circle'
+                  icon='hass:circle'
                 ></iron-icon>
               </template>
               <template is='dom-if' if='[[!isRunning]]'>
                 <iron-icon
                   title='Add-on is stopped'
                   class='stopped'
-                  icon='mdi:circle'
+                  icon='hass:circle'
                 ></iron-icon>
               </template>
             </template>
diff --git a/hassio/addon-view/hassio-addon-view.html b/hassio/addon-view/hassio-addon-view.html
index 75cc8a028c5f..907a82d2aa30 100644
--- a/hassio/addon-view/hassio-addon-view.html
+++ b/hassio/addon-view/hassio-addon-view.html
@@ -21,7 +21,7 @@
       :host {
         color: var(--primary-text-color);
         --paper-card-header-color: var(--primary-text-color);
-      }      
+      }
       .content {
         padding: 24px 0 32px;
         max-width: 600px;
@@ -42,10 +42,10 @@
     ></app-route>
     <app-header-layout has-scrolling-region>
       <app-header fixed slot='header'>
-        <app-toolbar>            
+        <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <paper-icon-button
-            icon='mdi:arrow-left'
+            icon='hass:arrow-left'
             on-click='backTapped'
           ></paper-icon-button>
           <div main-title>Hass.io: add-on details</div>
diff --git a/hassio/dashboard/hassio-addons.html b/hassio/dashboard/hassio-addons.html
index 51ae65ceb5c4..e5c70b327b48 100644
--- a/hassio/dashboard/hassio-addons.html
+++ b/hassio/dashboard/hassio-addons.html
@@ -54,7 +54,7 @@
   }
 
   computeIcon(addon) {
-    return addon.installed !== addon.version ? 'mdi:arrow-up-bold-circle' : 'mdi:puzzle';
+    return addon.installed !== addon.version ? 'hass:arrow-up-bold-circle' : 'hass:puzzle';
   }
 
   computeIconTitle(addon) {
diff --git a/hassio/dashboard/hassio-hass-update.html b/hassio/dashboard/hassio-hass-update.html
index 9fb6874907b4..0f206dafb416 100644
--- a/hassio/dashboard/hassio-hass-update.html
+++ b/hassio/dashboard/hassio-hass-update.html
@@ -20,15 +20,15 @@
       }
     </style>
     <template is='dom-if' if='[[computeUpdateAvailable(hassInfo)]]'>
-      <div class='content'> 
+      <div class='content'>
         <div class='card-group'>
-          <div class='title'>Update available! 🎉</div>     
+          <div class='title'>Update available! 🎉</div>
           <paper-card>
             <div class='card-content'>
               <hassio-card-content
                 title='Home Assistant [[hassInfo.last_version]] is available'
                 description='You are currently running version [[hassInfo.version]]'
-                icon='mdi:home-assistant'
+                icon='hass:home-assistant'
                 icon-class='hassupdate'
               ></hassio-card-content>
               <template is='dom-if' if='[[error]]'>
diff --git a/hassio/hassio-markdown-dialog.html b/hassio/hassio-markdown-dialog.html
index 92b3b0c8ff62..f0748cbde817 100644
--- a/hassio/hassio-markdown-dialog.html
+++ b/hassio/hassio-markdown-dialog.html
@@ -54,7 +54,7 @@
     >
       <app-toolbar>
         <paper-icon-button
-          icon='mdi:close'
+          icon='hass:close'
           dialog-dismiss
         ></paper-icon-button>
         <div main-title>[[title]]</div>
diff --git a/hassio/hassio-pages-with-tabs.html b/hassio/hassio-pages-with-tabs.html
index 1b929df53457..e4db0fd97824 100644
--- a/hassio/hassio-pages-with-tabs.html
+++ b/hassio/hassio-pages-with-tabs.html
@@ -32,12 +32,12 @@
     </style>
     <app-header-layout has-scrolling-region>
       <app-header fixed slot='header'>
-        <app-toolbar>            
+        <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>Hass.io</div>
           <template is='dom-if' if='[[showRefreshButton(page)]]'>
             <paper-icon-button
-              icon='mdi:refresh'
+              icon='hass:refresh'
               on-click='refreshClicked'
             ></paper-icon-button>
           </template>
@@ -89,7 +89,7 @@
     ></hassio-markdown-dialog>
 
     <template is='dom-if' if='[[equals(page, "snapshots")]]'>
-      <hassio-snapshot      
+      <hassio-snapshot
         hass='[[hass]]'
         snapshot-slug='{{snapshotSlug}}'
         snapshot-deleted='{{snapshotDeleted}}'
diff --git a/hassio/snapshots/hassio-snapshot.html b/hassio/snapshots/hassio-snapshot.html
index 483c9167dbc6..b22024578b3f 100644
--- a/hassio/snapshots/hassio-snapshot.html
+++ b/hassio/snapshots/hassio-snapshot.html
@@ -57,7 +57,7 @@
     <paper-dialog id='dialog' with-backdrop on-iron-overlay-closed='_dialogClosed'>
       <app-toolbar>
         <paper-icon-button
-          icon='mdi:close'
+          icon='hass:close'
           dialog-dismiss
         ></paper-icon-button>
         <div main-title>[[_computeName(snapshot)]]</div>
@@ -97,14 +97,14 @@
       </template>
       <div class='buttons'>
         <paper-icon-button
-          icon='mdi:delete'
+          icon='hass:delete'
           on-click='_deleteClicked'
           class='warning'
           title='Delete snapshot'
         ></paper-icon-button>
         <a href='[[_computeDownloadUrl(snapshotSlug)]]' download='[[_computeDownloadName(snapshot)]]'>
           <paper-icon-button
-            icon='mdi:download'
+            icon='hass:download'
             class='download'
             title='Download snapshot'
           ></paper-icon-button>
diff --git a/hassio/snapshots/hassio-snapshots.html b/hassio/snapshots/hassio-snapshots.html
index b53dcf9a896b..08f79fb591f7 100644
--- a/hassio/snapshots/hassio-snapshots.html
+++ b/hassio/snapshots/hassio-snapshots.html
@@ -242,7 +242,7 @@
   }
 
   _computeIcon(type) {
-    return type === 'full' ? 'mdi:package-variant-closed' : 'mdi:package-variant';
+    return type === 'full' ? 'hass:package-variant-closed' : 'hass:package-variant';
   }
 
   _snapshotClicked(ev) {
diff --git a/panels/config/automation/ha-automation-editor.html b/panels/config/automation/ha-automation-editor.html
index b7cbd6497a02..08a8c64f4508 100644
--- a/panels/config/automation/ha-automation-editor.html
+++ b/panels/config/automation/ha-automation-editor.html
@@ -87,7 +87,7 @@
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
-            icon='mdi:arrow-left'
+            icon='hass:arrow-left'
             on-click='backTapped'
           ></paper-icon-button>
           <div main-title>[[name]]</div>
@@ -103,7 +103,7 @@
       <paper-fab slot="fab"
         is-wide$='[[isWide]]'
         dirty$='[[dirty]]'
-        icon='mdi:content-save'
+        icon='hass:content-save'
         title="[[localize('ui.panel.config.automation.editor.save')]]"
         on-click='saveAutomation'
       ></paper-fab>
diff --git a/panels/config/automation/ha-automation-picker.html b/panels/config/automation/ha-automation-picker.html
index e635efb9bc45..5ccf00dc69a5 100644
--- a/panels/config/automation/ha-automation-picker.html
+++ b/panels/config/automation/ha-automation-picker.html
@@ -49,7 +49,7 @@
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
-            icon='mdi:arrow-left'
+            icon='hass:arrow-left'
             on-click='_backTapped'
           ></paper-icon-button>
           <div main-title>[[localize('ui.panel.config.automation.caption')]]</div>
@@ -76,7 +76,7 @@
                 <div>[[computeName(automation)]]</div>
                 <div secondary>[[computeDescription(automation)]]</div>
               </paper-item-body>
-              <iron-icon icon='mdi:chevron-right'></iron-icon>
+              <iron-icon icon='hass:chevron-right'></iron-icon>
             </paper-item>
           </template>
         </paper-card>
@@ -84,7 +84,7 @@
 
       <paper-fab slot="fab"
         is-wide$='[[isWide]]'
-        icon='mdi:plus'
+        icon='hass:plus'
         title="[[localize('ui.panel.config.automation.picker.add_automation')]]"
         on-click='addAutomation'
       ></paper-fab>
diff --git a/panels/config/cloud/ha-config-cloud-login.html b/panels/config/cloud/ha-config-cloud-login.html
index 34e208bb3641..a52dcb8ad20e 100644
--- a/panels/config/cloud/ha-config-cloud-login.html
+++ b/panels/config/cloud/ha-config-cloud-login.html
@@ -72,7 +72,7 @@
             <div class='card-content flash-msg'>
               [[flashMessage]]
               <paper-icon-button
-                icon='mdi:close'
+                icon='hass:close'
                 on-click='_dismissFlash'
               >Dismiss</paper-icon-button>
               <paper-ripple id='flashRipple' noink></paper-ripple>
@@ -119,7 +119,7 @@ <h1>Sign In</h1>
                 Create Account
                 <div secondary>Get up and running quickly.</div>
               </paper-item-body>
-              <iron-icon icon='mdi:chevron-right'></iron-icon>
+              <iron-icon icon='hass:chevron-right'></iron-icon>
             </paper-item>
           </paper-card>
         </ha-config-section>
diff --git a/panels/config/core/ha-config-core.html b/panels/config/core/ha-config-core.html
index a421a4755b0c..d174601bbbca 100644
--- a/panels/config/core/ha-config-core.html
+++ b/panels/config/core/ha-config-core.html
@@ -34,7 +34,7 @@
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
-            icon='mdi:arrow-left'
+            icon='hass:arrow-left'
             on-click='_backTapped'
           ></paper-icon-button>
           <div main-title>[[localize('ui.panel.config.core.caption')]]</div>
diff --git a/panels/config/customize/ha-config-customize.html b/panels/config/customize/ha-config-customize.html
index 9d5467f62446..9654418602f5 100644
--- a/panels/config/customize/ha-config-customize.html
+++ b/panels/config/customize/ha-config-customize.html
@@ -21,7 +21,7 @@
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
-            icon='mdi:arrow-left'
+            icon='hass:arrow-left'
             on-click='_backTapped'
           ></paper-icon-button>
           <div main-title>[[localize('ui.panel.config.customize.caption')]]</div>
diff --git a/panels/config/customize/ha-customize-attribute.html b/panels/config/customize/ha-customize-attribute.html
index f13ba38807a6..dfbe264ce423 100644
--- a/panels/config/customize/ha-customize-attribute.html
+++ b/panels/config/customize/ha-customize-attribute.html
@@ -54,7 +54,7 @@
   }
 
   getIcon(secondary) {
-    return secondary ? 'mdi:pencil' : 'mdi:close';
+    return secondary ? 'hass:pencil' : 'hass:close';
   }
 
   itemObserver(item) {
diff --git a/panels/config/customize/types/ha-customize-icon.html b/panels/config/customize/types/ha-customize-icon.html
index 013bdf772eb3..f69233cf11d0 100644
--- a/panels/config/customize/types/ha-customize-icon.html
+++ b/panels/config/customize/types/ha-customize-icon.html
@@ -17,7 +17,7 @@
     </style>
     <iron-icon class="icon-image" icon="[[item.value]]"></iron-icon>
     <paper-input
-      auto-validate pattern="(mdi:.*)?" error-message="Must start with 'mdi:'"
+      auto-validate pattern="(hass:.*)?" error-message="Must start with 'hass:'"
       disabled='[[item.secondary]]'
       label='icon'
       value='{{item.value}}'>
diff --git a/panels/config/dashboard/ha-config-cloud-menu.html b/panels/config/dashboard/ha-config-cloud-menu.html
index 954cf08614aa..4526c6db751d 100644
--- a/panels/config/dashboard/ha-config-cloud-menu.html
+++ b/panels/config/dashboard/ha-config-cloud-menu.html
@@ -27,7 +27,7 @@
             <div secondary>Not logged in</div>
           </template>
         </paper-item-body>
-        <iron-icon icon='mdi:chevron-right'></iron-icon>
+        <iron-icon icon='hass:chevron-right'></iron-icon>
       </paper-item>
     </paper-card>
   </template>
diff --git a/panels/config/dashboard/ha-config-entries-menu.html b/panels/config/dashboard/ha-config-entries-menu.html
index e6a77a5964c3..6691adb5eab5 100644
--- a/panels/config/dashboard/ha-config-entries-menu.html
+++ b/panels/config/dashboard/ha-config-entries-menu.html
@@ -22,7 +22,7 @@
           Integrations
           <div secondary>EXPERIMENTAL – Manage connected devices and services</div>
         </paper-item-body>
-        <iron-icon icon='mdi:chevron-right'></iron-icon>
+        <iron-icon icon='hass:chevron-right'></iron-icon>
       </paper-item>
     </paper-card>
   </template>
diff --git a/panels/config/dashboard/ha-config-navigation.html b/panels/config/dashboard/ha-config-navigation.html
index 921960c16323..087a2f13ea12 100644
--- a/panels/config/dashboard/ha-config-navigation.html
+++ b/panels/config/dashboard/ha-config-navigation.html
@@ -24,7 +24,7 @@
               [[_computeCaption(item, localize)]]
               <div secondary>[[_computeDescription(item, localize)]]</div>
             </paper-item-body>
-            <iron-icon icon='mdi:chevron-right'></iron-icon>
+            <iron-icon icon='hass:chevron-right'></iron-icon>
           </paper-item>
         </template>
       </template>
diff --git a/panels/config/script/ha-script-editor.html b/panels/config/script/ha-script-editor.html
index 59c75607757c..10816dcf1050 100644
--- a/panels/config/script/ha-script-editor.html
+++ b/panels/config/script/ha-script-editor.html
@@ -85,7 +85,7 @@
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
-            icon='mdi:arrow-left'
+            icon='hass:arrow-left'
             on-click='backTapped'
           ></paper-icon-button>
           <div main-title>Script [[name]]</div>
@@ -100,7 +100,7 @@
       <paper-fab slot="fab"
         is-wide$='[[isWide]]'
         dirty$='[[dirty]]'
-        icon='mdi:content-save'
+        icon='hass:content-save'
         title='Save'
         on-click='saveScript'
       ></paper-fab>
diff --git a/panels/config/script/ha-script-picker.html b/panels/config/script/ha-script-picker.html
index 1be02521d2fc..18095ef93ed8 100644
--- a/panels/config/script/ha-script-picker.html
+++ b/panels/config/script/ha-script-picker.html
@@ -44,7 +44,7 @@
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
-            icon='mdi:arrow-left'
+            icon='hass:arrow-left'
             on-click='_backTapped'
           ></paper-icon-button>
           <div main-title>[[localize('ui.panel.config.script.caption')]]</div>
@@ -72,7 +72,7 @@
                 <div>[[computeName(script)]]</div>
                 <div secondary>[[computeDescription(script)]]</div>
               </paper-item-body>
-              <iron-icon icon='mdi:chevron-right'></iron-icon>
+              <iron-icon icon='hass:chevron-right'></iron-icon>
             </paper-item>
           </template>
         </paper-card>
@@ -80,7 +80,7 @@
 
       <paper-fab slot="fab"
         is-wide$='[[isWide]]'
-        icon='mdi:plus'
+        icon='hass:plus'
         title='Add Script'
         on-click='addScript'
       ></paper-fab>
diff --git a/panels/config/zwave/ha-config-zwave.html b/panels/config/zwave/ha-config-zwave.html
index dc3fa927728d..4d0525e9788b 100644
--- a/panels/config/zwave/ha-config-zwave.html
+++ b/panels/config/zwave/ha-config-zwave.html
@@ -76,7 +76,7 @@
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
-            icon='mdi:arrow-left'
+            icon='hass:arrow-left'
             on-click='_backTapped'
           ></paper-icon-button>
           <div main-title>[[localize('ui.panel.config.zwave.caption')]]</div>
@@ -96,7 +96,7 @@
           <paper-icon-button
             class="toggle-help-icon"
             on-click='toggleHelp'
-            icon='mdi:help-circle'
+            icon='hass:help-circle'
           ></paper-icon-button>
 
         </div>
diff --git a/panels/config/zwave/zwave-network.html b/panels/config/zwave/zwave-network.html
index 53f75b634697..e15a525c1569 100644
--- a/panels/config/zwave/zwave-network.html
+++ b/panels/config/zwave/zwave-network.html
@@ -46,7 +46,7 @@
         <paper-icon-button
           class="toggle-help-icon"
           on-click='helpTap'
-          icon='mdi:help-circle'
+          icon='hass:help-circle'
         ></paper-icon-button>
 
       </div>
diff --git a/panels/dev-info/ha-panel-dev-info.html b/panels/dev-info/ha-panel-dev-info.html
index 02c10c0dc5d8..0316adde5534 100644
--- a/panels/dev-info/ha-panel-dev-info.html
+++ b/panels/dev-info/ha-panel-dev-info.html
@@ -195,7 +195,7 @@
         </div>
         <p class='error-log-intro'>
           Press the button to load the full Home Assistant log.
-          <paper-icon-button icon='mdi:refresh' on-click='refreshErrorLog'></paper-icon-button>
+          <paper-icon-button icon='hass:refresh' on-click='refreshErrorLog'></paper-icon-button>
         </p>
         <div class='error-log'>[[errorLog]]</div>
       </div>
diff --git a/panels/dev-state/ha-panel-dev-state.html b/panels/dev-state/ha-panel-dev-state.html
index d26ada4c5586..39763734b744 100644
--- a/panels/dev-state/ha-panel-dev-state.html
+++ b/panels/dev-state/ha-panel-dev-state.html
@@ -119,7 +119,7 @@ <h1>Current entities</h1>
               <td>
                 <paper-icon-button
                   on-click='entityMoreInfo'
-                  icon='mdi:open-in-new'
+                  icon='hass:open-in-new'
                   alt="More Info" title="More Info"
                   >
                 </paper-icon-button>
diff --git a/panels/logbook/ha-panel-logbook.html b/panels/logbook/ha-panel-logbook.html
index 2bb9ab8d1ad9..d097f639702b 100644
--- a/panels/logbook/ha-panel-logbook.html
+++ b/panels/logbook/ha-panel-logbook.html
@@ -57,7 +57,7 @@
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>[[localize('panel.logbook')]]</div>
           <paper-icon-button
-            icon='mdi:refresh'
+            icon='hass:refresh'
             on-click='refreshLogbook'
             hidden$='[[isLoading]]'
           ></paper-icon-button>
diff --git a/panels/mailbox/ha-panel-mailbox.html b/panels/mailbox/ha-panel-mailbox.html
index b2476a687036..24ced83d026f 100644
--- a/panels/mailbox/ha-panel-mailbox.html
+++ b/panels/mailbox/ha-panel-mailbox.html
@@ -130,7 +130,7 @@ <h2>
         [[localize('ui.panel.mailbox.playback_title')]]
         <paper-icon-button
           on-click='openDeleteDialog'
-          icon='mdi:delete'
+          icon='hass:delete'
         ></paper-icon-button>
       </h2>
       <div id="transcribe"></div>
diff --git a/panels/shopping-list/ha-panel-shopping-list.html b/panels/shopping-list/ha-panel-shopping-list.html
index 8409c3601a30..38d93479f8f7 100644
--- a/panels/shopping-list/ha-panel-shopping-list.html
+++ b/panels/shopping-list/ha-panel-shopping-list.html
@@ -74,7 +74,7 @@
             vertical-offset="-5"
           >
             <paper-icon-button
-              icon="mdi:dots-vertical"
+              icon="hass:dots-vertical"
               slot="dropdown-trigger"
             ></paper-icon-button>
             <paper-listbox slot="dropdown-content">
@@ -91,7 +91,7 @@
           <paper-icon-item on-focus='_focusRowInput'>
             <paper-icon-button
               slot="item-icon"
-              icon="mdi:plus"
+              icon="hass:plus"
               on-click='_addItem'
             ></paper-icon-button>
             <paper-item-body>
diff --git a/src/cards/ha-media_player-card.html b/src/cards/ha-media_player-card.html
index 0a137fa72ccd..d26ddba344fd 100644
--- a/src/cards/ha-media_player-card.html
+++ b/src/cards/ha-media_player-card.html
@@ -167,7 +167,7 @@
 
     <div class='controls layout horizontal justified'>
       <paper-icon-button
-        icon='mdi:power'
+        icon='hass:power'
         on-click='handleTogglePower'
         invisible$='[[computeHidePowerButton(playerObj)]]'
         class='self-center secondary'
@@ -175,7 +175,7 @@
 
       <div>
         <paper-icon-button
-          icon='mdi:skip-previous'
+          icon='hass:skip-previous'
           invisible$='[[!playerObj.supportsPreviousTrack]]'
           disabled='[[playerObj.isOff]]'
           on-click='handlePrevious'
@@ -188,7 +188,7 @@
           on-click='handlePlaybackControl'
         ></paper-icon-button>
         <paper-icon-button
-          icon='mdi:skip-next'
+          icon='hass:skip-next'
           invisible$='[[!playerObj.supportsNextTrack]]'
           disabled='[[playerObj.isOff]]'
           on-click='handleNext'
@@ -196,7 +196,7 @@
       </div>
 
       <paper-icon-button
-        icon='mdi:dots-vertical'
+        icon='hass:dots-vertical'
         on-click='handleOpenMoreInfo'
         class='self-center secondary'
       ></paper-icon-button>
@@ -322,9 +322,9 @@
 
   computePlaybackControlIcon(playerObj) {
     if (playerObj.isPlaying) {
-      return playerObj.supportsPause ? 'mdi:pause' : 'mdi:stop';
+      return playerObj.supportsPause ? 'hass:pause' : 'hass:stop';
     } else if (playerObj.isPaused || playerObj.isOff || playerObj.isIdle) {
-      return playerObj.supportsPlay ? 'mdi:play' : null;
+      return playerObj.supportsPlay ? 'hass:play' : null;
     }
     return '';
   }
diff --git a/src/cards/ha-plant-card.html b/src/cards/ha-plant-card.html
index 5b0a12cc6748..640beef56e73 100644
--- a/src/cards/ha-plant-card.html
+++ b/src/cards/ha-plant-card.html
@@ -59,11 +59,11 @@
   constructor() {
     super();
     this.sensors = {
-      moisture: 'mdi:water',
-      temperature: 'mdi:thermometer',
-      brightness: 'mdi:white-balance-sunny',
-      conductivity: 'mdi:emoticon-poop',
-      battery: 'mdi:battery'
+      moisture: 'hass:water',
+      temperature: 'hass:thermometer',
+      brightness: 'hass:white-balance-sunny',
+      conductivity: 'hass:emoticon-poop',
+      battery: 'hass:battery'
     };
   }
 
diff --git a/src/components/entity/ha-entity-picker.html b/src/components/entity/ha-entity-picker.html
index 10ffa37e124c..114e76cb45cd 100644
--- a/src/components/entity/ha-entity-picker.html
+++ b/src/components/entity/ha-entity-picker.html
@@ -40,7 +40,7 @@
         <paper-icon-button
           slot="suffix"
           class="clear-button"
-          icon="mdi:close"
+          icon="hass:close"
           no-ripple
           hidden$='[[!value]]'
         >Clear</paper-icon-button>
@@ -157,7 +157,7 @@
   }
 
   _computeToggleIcon(opened) {
-    return opened ? 'mdi:menu-up' : 'mdi:menu-down';
+    return opened ? 'hass:menu-up' : 'hass:menu-down';
   }
 }
 
diff --git a/src/components/entity/ha-entity-toggle.html b/src/components/entity/ha-entity-toggle.html
index 0e9b41a96a4f..d328d74d8676 100644
--- a/src/components/entity/ha-entity-toggle.html
+++ b/src/components/entity/ha-entity-toggle.html
@@ -25,8 +25,8 @@
     </style>
 
     <template is='dom-if' if='[[stateObj.attributes.assumed_state]]'>
-      <paper-icon-button icon="mdi:flash-off" on-click="turnOff" state-active$='[[!isOn]]'></paper-icon-button>
-      <paper-icon-button icon="mdi:flash" on-click="turnOn" state-active$='[[isOn]]'></paper-icon-button>
+      <paper-icon-button icon="hass:flash-off" on-click="turnOff" state-active$='[[!isOn]]'></paper-icon-button>
+      <paper-icon-button icon="hass:flash" on-click="turnOn" state-active$='[[isOn]]'></paper-icon-button>
     </template>
     <template is='dom-if' if='[[!stateObj.attributes.assumed_state]]'>
       <paper-toggle-button
diff --git a/src/components/entity/ha-state-label-badge.html b/src/components/entity/ha-state-label-badge.html
index 77ec20089eb2..605da8aaead2 100644
--- a/src/components/entity/ha-state-label-badge.html
+++ b/src/components/entity/ha-state-label-badge.html
@@ -131,17 +131,17 @@
     switch (domain) {
       case 'alarm_control_panel':
         if (state.state === 'pending') {
-          return 'mdi:clock-fast';
+          return 'hass:clock-fast';
         } else if (state.state === 'armed_away') {
-          return 'mdi:nature';
+          return 'hass:nature';
         } else if (state.state === 'armed_home') {
-          return 'mdi:home-variant';
+          return 'hass:home-variant';
         } else if (state.state === 'armed_night') {
-          return 'mdi:weather-night';
+          return 'hass:weather-night';
         } else if (state.state === 'armed_custom_bypass') {
-          return 'mdi:security-home';
+          return 'hass:security-home';
         } else if (state.state === 'triggered') {
-          return 'mdi:alert-circle';
+          return 'hass:alert-circle';
         }
         // state == 'disarmed'
         return window.hassUtil.domainIcon(domain, state.state);
@@ -151,9 +151,9 @@
         return window.hassUtil.stateIcon(state);
       case 'sun':
         return state.state === 'above_horizon' ?
-          window.hassUtil.domainIcon(domain) : 'mdi:brightness-3';
+          window.hassUtil.domainIcon(domain) : 'hass:brightness-3';
       case 'timer':
-        return state.state === 'active' ? 'mdi:timer' : 'mdi:timer-off';
+        return state.state === 'active' ? 'hass:timer' : 'hass:timer-off';
       default:
         return null;
     }
diff --git a/src/components/ha-climate-control.html b/src/components/ha-climate-control.html
index 7ce1dcb9caa3..0e21a11d03a7 100644
--- a/src/components/ha-climate-control.html
+++ b/src/components/ha-climate-control.html
@@ -37,10 +37,10 @@
     </div>
     <div class="control-buttons">
       <div>
-        <paper-icon-button icon="mdi:chevron-up" on-click="incrementValue"></paper-icon-button>
+        <paper-icon-button icon="hass:chevron-up" on-click="incrementValue"></paper-icon-button>
       </div>
       <div>
-        <paper-icon-button icon="mdi:chevron-down" on-click="decrementValue"></paper-icon-button>
+        <paper-icon-button icon="hass:chevron-down" on-click="decrementValue"></paper-icon-button>
       </div>
     </div>
   </template>
diff --git a/src/components/ha-combo-box.html b/src/components/ha-combo-box.html
index 4f5e5e9c063c..c9adb994327e 100644
--- a/src/components/ha-combo-box.html
+++ b/src/components/ha-combo-box.html
@@ -34,7 +34,7 @@
         <paper-icon-button
           slot="suffix"
           class="clear-button"
-          icon="mdi:close"
+          icon="hass:close"
           hidden$='[[!value]]'
         >Clear</paper-icon-button>
         <paper-icon-button
@@ -97,7 +97,7 @@
   }
 
   _computeToggleIcon(opened) {
-    return opened ? 'mdi:menu-up' : 'mdi:menu-down';
+    return opened ? 'hass:menu-up' : 'hass:menu-down';
   }
 
   _computeItemLabel(item, itemLabelPath) {
diff --git a/src/components/ha-cover-controls.html b/src/components/ha-cover-controls.html
index a3459e592f92..b618cad2c3d5 100644
--- a/src/components/ha-cover-controls.html
+++ b/src/components/ha-cover-controls.html
@@ -15,12 +15,12 @@
     </style>
 
     <div class='state'>
-      <paper-icon-button icon="mdi:arrow-up" on-click='onOpenTap'
+      <paper-icon-button icon="hass:arrow-up" on-click='onOpenTap'
         invisible$='[[!entityObj.supportsOpen]]'
         disabled='[[computeOpenDisabled(stateObj, entityObj)]]'></paper-icon-button>
-      <paper-icon-button icon="mdi:stop" on-click='onStopTap'
+      <paper-icon-button icon="hass:stop" on-click='onStopTap'
         invisible$='[[!entityObj.supportsStop]]'></paper-icon-button>
-      <paper-icon-button icon="mdi:arrow-down" on-click='onCloseTap'
+      <paper-icon-button icon="hass:arrow-down" on-click='onCloseTap'
         invisible$='[[!entityObj.supportsClose]]'
         disabled='[[computeClosedDisabled(stateObj, entityObj)]]'></paper-icon-button>
     </div>
diff --git a/src/components/ha-cover-tilt-controls.html b/src/components/ha-cover-tilt-controls.html
index f751964791ab..b570177be5c0 100644
--- a/src/components/ha-cover-tilt-controls.html
+++ b/src/components/ha-cover-tilt-controls.html
@@ -16,14 +16,14 @@
         visibility: hidden !important;
       }
     </style>
-    <paper-icon-button icon="mdi:arrow-top-right" 
+    <paper-icon-button icon="hass:arrow-top-right"
       on-click='onOpenTiltTap' title='Open tilt'
       invisible$='[[!entityObj.supportsOpenTilt]]'
       disabled='[[computeOpenDisabled(stateObj, entityObj)]]'></paper-icon-button>
-    <paper-icon-button icon="mdi:stop" on-click='onStopTiltTap'
+    <paper-icon-button icon="hass:stop" on-click='onStopTiltTap'
       invisible$='[[!entityObj.supportsStopTilt]]'
       title='Stop tilt'></paper-icon-button>
-    <paper-icon-button icon="mdi:arrow-bottom-left"
+    <paper-icon-button icon="hass:arrow-bottom-left"
       on-click='onCloseTiltTap' title='Close tilt'
       invisible$='[[!entityObj.supportsCloseTilt]]'
       disabled='[[computeClosedDisabled(stateObj, entityObj)]]'></paper-icon-button>
diff --git a/src/components/ha-demo-badge.html b/src/components/ha-demo-badge.html
index cf91b895b12d..193e17fc227e 100644
--- a/src/components/ha-demo-badge.html
+++ b/src/components/ha-demo-badge.html
@@ -11,7 +11,7 @@
     </style>
 
     <ha-label-badge
-      icon='mdi:emoticon'
+      icon='hass:emoticon'
       label='Demo'
       description=''
     ></ha-label-badge>
diff --git a/src/components/ha-menu-button.html b/src/components/ha-menu-button.html
index 2777b8bc5d79..907a3e77d19b 100644
--- a/src/components/ha-menu-button.html
+++ b/src/components/ha-menu-button.html
@@ -11,7 +11,7 @@
       }
     </style>
     <paper-icon-button
-      icon='mdi:menu'
+      icon='hass:menu'
       class$='[[computeMenuButtonClass(narrow, showMenu)]]'
       on-click='toggleMenu'
     ></paper-icon-button>
diff --git a/src/components/ha-start-voice-button.html b/src/components/ha-start-voice-button.html
index 95bd40013266..b183f508fe07 100644
--- a/src/components/ha-start-voice-button.html
+++ b/src/components/ha-start-voice-button.html
@@ -6,7 +6,7 @@
 <dom-module id='ha-start-voice-button'>
   <template>
     <paper-icon-button
-      icon="mdi:microphone" hidden$='[[!canListen]]'
+      icon="hass:microphone" hidden$='[[!canListen]]'
       on-click="handleListenClick"
     ></paper-icon-button>
 
diff --git a/src/components/hassio-card-content.html b/src/components/hassio-card-content.html
index b126577091fd..da1fc78033f2 100644
--- a/src/components/hassio-card-content.html
+++ b/src/components/hassio-card-content.html
@@ -33,7 +33,7 @@
       .addition {
         color: var(--secondary-text-color);
         overflow: hidden;
-        position: relative; 
+        position: relative;
         height: 2.4em;
         line-height: 1.2em;
       }
@@ -67,7 +67,7 @@
       datetime: String,
       icon: {
         type: String,
-        value: 'mdi:help-circle'
+        value: 'hass:help-circle'
       },
       iconTitle: String,
       iconClass: String,
diff --git a/src/dialogs/ha-voice-command-dialog.html b/src/dialogs/ha-voice-command-dialog.html
index bff3f6032a6f..659b54d8a2f4 100644
--- a/src/dialogs/ha-voice-command-dialog.html
+++ b/src/dialogs/ha-voice-command-dialog.html
@@ -122,7 +122,7 @@
       </template>
       <div class='icon' hidden$="[[results]]">
         <paper-icon-button
-          icon="mdi:text-to-speech"
+          icon="hass:text-to-speech"
           on-click='startListening'
         ></paper-icon-button>
       </div>
diff --git a/src/dialogs/more-info/controls/more-info-fan.html b/src/dialogs/more-info/controls/more-info-fan.html
index a391d1367d08..d10ed70f4a46 100644
--- a/src/dialogs/more-info/controls/more-info-fan.html
+++ b/src/dialogs/more-info/controls/more-info-fan.html
@@ -62,10 +62,10 @@
       <div class='container-direction'>
         <div class='direction'>
           <div>Direction</div>
-          <paper-icon-button icon='mdi:rotate-left'
+          <paper-icon-button icon='hass:rotate-left'
             on-click='onDirectionLeft' title='Left'
             disabled='[[computeIsRotatingLeft(stateObj)]]'></paper-icon-button>
-          <paper-icon-button icon='mdi:rotate-right'
+          <paper-icon-button icon='hass:rotate-right'
             on-click='onDirectionRight' title='Right'
             disabled='[[computeIsRotatingRight(stateObj)]]'></paper-icon-button>
         </div>
diff --git a/src/dialogs/more-info/controls/more-info-light.html b/src/dialogs/more-info/controls/more-info-light.html
index ade233e5741e..787156bc4c6c 100644
--- a/src/dialogs/more-info/controls/more-info-light.html
+++ b/src/dialogs/more-info/controls/more-info-light.html
@@ -70,7 +70,7 @@
 
       <div class='control brightness'>
         <ha-labeled-slider
-          caption='Brightness' icon='mdi:brightness-5' max='255'
+          caption='Brightness' icon='hass:brightness-5' max='255'
           value='{{brightnessSliderValue}}'
           on-change='brightnessSliderChanged'
           ignore-bar-touch></ha-labeled-slider>
@@ -78,7 +78,7 @@
 
       <div class='control color_temp'>
         <ha-labeled-slider
-          caption='Color Temperature' icon='mdi:thermometer'
+          caption='Color Temperature' icon='hass:thermometer'
           min='[[stateObj.attributes.min_mireds]]' max='[[stateObj.attributes.max_mireds]]'
           value='{{ctSliderValue}}'
           on-change='ctSliderChanged'
@@ -87,7 +87,7 @@
 
       <div class='control white_value'>
         <ha-labeled-slider
-          caption='White Value' icon='mdi:file-word-box' max='255'
+          caption='White Value' icon='hass:file-word-box' max='255'
           value='{{wvSliderValue}}'
           on-change='wvSliderChanged'
           ignore-bar-touch></ha-labeled-slider>
diff --git a/src/dialogs/more-info/controls/more-info-media_player.html b/src/dialogs/more-info/controls/more-info-media_player.html
index 05c5a9169459..c49d2e84cc54 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.html
+++ b/src/dialogs/more-info/controls/more-info-media_player.html
@@ -58,19 +58,19 @@
     <div class$='[[computeClassNames(stateObj)]]'>
       <div class='layout horizontal'>
         <div class='flex'>
-          <paper-icon-button icon='mdi:power' highlight$='[[playerObj.isOff]]'
+          <paper-icon-button icon='hass:power' highlight$='[[playerObj.isOff]]'
             on-click='handleTogglePower'
             hidden$='[[computeHidePowerButton(playerObj)]]'
           ></paper-icon-button>
         </div>
         <div>
           <template is='dom-if' if='[[computeShowPlaybackControls(playerObj)]]'>
-            <paper-icon-button icon='mdi:skip-previous' on-click='handlePrevious'
+            <paper-icon-button icon='hass:skip-previous' on-click='handlePrevious'
               hidden$='[[!playerObj.supportsPreviousTrack]]'></paper-icon-button>
             <paper-icon-button icon='[[computePlaybackControlIcon(playerObj)]]'
               on-click='handlePlaybackControl'
               hidden$='[[!computePlaybackControlIcon(playerObj)]]' highlight></paper-icon-button>
-            <paper-icon-button icon='mdi:skip-next' on-click='handleNext'
+            <paper-icon-button icon='hass:skip-next' on-click='handleNext'
               hidden$='[[!playerObj.supportsNextTrack]]'></paper-icon-button>
           </template>
         </div>
@@ -79,13 +79,13 @@
       <div class='volume_buttons center horizontal layout'
           hidden$='[[computeHideVolumeButtons(playerObj)]]'>
         <paper-icon-button on-click="handleVolumeTap"
-          icon="mdi:volume-off"></paper-icon-button>
+          icon="hass:volume-off"></paper-icon-button>
         <paper-icon-button id="volumeDown" disabled$='[[playerObj.isMuted]]'
           on-mousedown="handleVolumeDown" on-touchstart="handleVolumeDown"
-          icon="mdi:volume-medium"></paper-icon-button>
+          icon="hass:volume-medium"></paper-icon-button>
         <paper-icon-button id="volumeUp" disabled$='[[playerObj.isMuted]]'
           on-mousedown="handleVolumeUp" on-touchstart="handleVolumeUp"
-          icon="mdi:volume-high"></paper-icon-button>
+          icon="hass:volume-high"></paper-icon-button>
       </div>
       <div class='volume center horizontal layout' hidden$='[[!playerObj.supportsVolumeSet]]'>
         <paper-icon-button on-click="handleVolumeTap"
@@ -100,7 +100,7 @@
       <!-- SOURCE PICKER -->
       <div class='controls layout horizontal justified'
            hidden$='[[computeHideSelectSource(playerObj)]]'>
-        <iron-icon class="source-input" icon="mdi:login-variant"></iron-icon>
+        <iron-icon class="source-input" icon="hass:login-variant"></iron-icon>
         <paper-dropdown-menu class="flex source-input" dynamic-align label-float label='Source'>
           <paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
             <template is='dom-repeat' items='[[playerObj.sourceList]]'>
@@ -118,7 +118,7 @@
           value='{{ttsMessage}}'
           on-keydown="ttsCheckForEnter"
         ></paper-input>
-        <paper-icon-button icon='mdi:send' on-click='sendTTS'></paper-icon-button>
+        <paper-icon-button icon='hass:send' on-click='sendTTS'></paper-icon-button>
       </div>
     </div>
   </template>
@@ -179,7 +179,7 @@
     }
 
     computeMuteVolumeIcon(playerObj) {
-      return playerObj.isMuted ? 'mdi:volume-off' : 'mdi:volume-high';
+      return playerObj.isMuted ? 'hass:volume-off' : 'hass:volume-high';
     }
 
     computeHideVolumeButtons(playerObj) {
@@ -192,9 +192,9 @@
 
     computePlaybackControlIcon(playerObj) {
       if (playerObj.isPlaying) {
-        return playerObj.supportsPause ? 'mdi:pause' : 'mdi:stop';
+        return playerObj.supportsPause ? 'hass:pause' : 'hass:stop';
       }
-      return playerObj.supportsPlay ? 'mdi:play' : null;
+      return playerObj.supportsPlay ? 'hass:play' : null;
     }
 
     computeHidePowerButton(playerObj) {
diff --git a/src/dialogs/more-info/controls/more-info-vacuum.html b/src/dialogs/more-info/controls/more-info-vacuum.html
index 0f0c5e8d9322..3f2763087735 100644
--- a/src/dialogs/more-info/controls/more-info-vacuum.html
+++ b/src/dialogs/more-info/controls/more-info-vacuum.html
@@ -43,23 +43,23 @@
       <div class="status-subtitle">Vacuum cleaner commands:</div>
       <div class='horizontal justified layout'>
         <div hidden$='[[!supportsPause(stateObj)]]'>
-          <paper-icon-button icon='mdi:play-pause'
+          <paper-icon-button icon='hass:play-pause'
             on-click='onPlayPause' title='Start/Pause'></paper-icon-button>
         </div>
         <div hidden$='[[!supportsStop(stateObj)]]'>
-          <paper-icon-button icon='mdi:stop'
+          <paper-icon-button icon='hass:stop'
             on-click='onStop' title='Stop'></paper-icon-button>
         </div>
         <div hidden$='[[!supportsCleanSpot(stateObj)]]'>
-        <paper-icon-button icon='mdi:broom'
+        <paper-icon-button icon='hass:broom'
             on-click='onCleanSpot' title='Clean spot'></paper-icon-button>
         </div>
         <div hidden$='[[!supportsLocate(stateObj)]]'>
-        <paper-icon-button icon='mdi:map-marker'
+        <paper-icon-button icon='hass:map-marker'
             on-click='onLocate' title='Locate'></paper-icon-button>
         </div>
         <div hidden$='[[!supportsReturnHome(stateObj)]]'>
-        <paper-icon-button icon='mdi:home-map-marker'
+        <paper-icon-button icon='hass:home-map-marker'
             on-click='onReturnHome' title='Return home'></paper-icon-button>
         </div>
       </div>
@@ -76,7 +76,7 @@
           </paper-listbox>
         </paper-dropdown-menu>
         <div style="justify-content: center; align-self: center; padding-top: 1.3em">
-          <span><iron-icon icon="mdi:fan"></iron-icon> [[stateObj.attributes.fan_speed]]</span>
+          <span><iron-icon icon="hass:fan"></iron-icon> [[stateObj.attributes.fan_speed]]</span>
         </div>
       </div>
       <p></p>
diff --git a/src/dialogs/more-info/more-info-controls.html b/src/dialogs/more-info/more-info-controls.html
index aa31748e6fbf..0e3864639001 100644
--- a/src/dialogs/more-info/more-info-controls.html
+++ b/src/dialogs/more-info/more-info-controls.html
@@ -45,13 +45,13 @@
 
     <app-toolbar>
       <paper-icon-button
-        icon='mdi:close'
+        icon='hass:close'
         dialog-dismiss
       ></paper-icon-button>
       <div class="main-title" main-title on-click="enlarge">[[_computeStateName(stateObj)]]</div>
       <template is='dom-if' if='[[canConfigure]]'>
         <paper-icon-button
-          icon='mdi:settings'
+          icon='hass:settings'
           on-click='_gotoSettings'
         ></paper-icon-button>
       </template>
diff --git a/src/dialogs/more-info/more-info-settings.html b/src/dialogs/more-info/more-info-settings.html
index 7282ec0b7476..a8bea1008b7f 100644
--- a/src/dialogs/more-info/more-info-settings.html
+++ b/src/dialogs/more-info/more-info-settings.html
@@ -33,7 +33,7 @@
 
     <app-toolbar>
       <paper-icon-button
-        icon='mdi:arrow-left'
+        icon='hass:arrow-left'
         on-click='_backTapped'
       ></paper-icon-button>
       <div main-title>[[_computeStateName(stateObj)]]</div>
diff --git a/src/layouts/hass-subpage.html b/src/layouts/hass-subpage.html
index c8365722ad80..934d79eb5869 100644
--- a/src/layouts/hass-subpage.html
+++ b/src/layouts/hass-subpage.html
@@ -11,7 +11,7 @@
       <app-header slot="header" fixed>
         <app-toolbar>
           <paper-icon-button
-            icon='mdi:arrow-left'
+            icon='hass:arrow-left'
             on-click='_backTapped'
           ></paper-icon-button>
           <div main-title>[[header]]</div>
diff --git a/src/util/hass-util.html b/src/util/hass-util.html
index d00ee7f64269..45d9b8692f3c 100644
--- a/src/util/hass-util.html
+++ b/src/util/hass-util.html
@@ -7,7 +7,7 @@
 <script>
 window.hassUtil = window.hassUtil || {};
 
-window.hassUtil.DEFAULT_ICON = 'mdi:bookmark';
+window.hassUtil.DEFAULT_ICON = 'hass:bookmark';
 
 window.hassUtil.OFF_STATES = ['off', 'closed', 'unlocked'];
 
@@ -80,139 +80,139 @@
     case 'alarm_control_panel':
       switch (state) {
         case 'armed_home':
-          return 'mdi:bell-plus';
+          return 'hass:bell-plus';
         case 'armed_night':
-          return 'mdi:bell-sleep';
+          return 'hass:bell-sleep';
         case 'disarmed':
-          return 'mdi:bell-outline';
+          return 'hass:bell-outline';
         case 'triggered':
-          return 'mdi:bell-ring';
+          return 'hass:bell-ring';
         default:
-          return 'mdi:bell';
+          return 'hass:bell';
       }
 
     case 'automation':
-      return 'mdi:playlist-play';
+      return 'hass:playlist-play';
 
     case 'binary_sensor':
-      return state && state === 'off' ? 'mdi:radiobox-blank' : 'mdi:checkbox-marked-circle';
+      return state && state === 'off' ? 'hass:radiobox-blank' : 'hass:checkbox-marked-circle';
 
     case 'calendar':
-      return 'mdi:calendar';
+      return 'hass:calendar';
 
     case 'camera':
-      return 'mdi:video';
+      return 'hass:video';
 
     case 'climate':
-      return 'mdi:thermostat';
+      return 'hass:thermostat';
 
     case 'configurator':
-      return 'mdi:settings';
+      return 'hass:settings';
 
     case 'conversation':
-      return 'mdi:text-to-speech';
+      return 'hass:text-to-speech';
 
     case 'cover':
-      return state && state === 'open' ? 'mdi:window-open' : 'mdi:window-closed';
+      return state && state === 'open' ? 'hass:window-open' : 'hass:window-closed';
 
     case 'device_tracker':
-      return 'mdi:account';
+      return 'hass:account';
 
     case 'fan':
-      return 'mdi:fan';
+      return 'hass:fan';
 
     case 'history_graph':
-      return 'mdi:chart-line';
+      return 'hass:chart-line';
 
     case 'group':
-      return 'mdi:google-circles-communities';
+      return 'hass:google-circles-communities';
 
     case 'homeassistant':
-      return 'mdi:home-assistant';
+      return 'hass:home-assistant';
 
     case 'image_processing':
-      return 'mdi:image-filter-frames';
+      return 'hass:image-filter-frames';
 
     case 'input_boolean':
-      return 'mdi:drawing';
+      return 'hass:drawing';
 
     case 'input_datetime':
-      return 'mdi:calendar-clock';
+      return 'hass:calendar-clock';
 
     case 'input_select':
-      return 'mdi:format-list-bulleted';
+      return 'hass:format-list-bulleted';
 
     case 'input_number':
-      return 'mdi:ray-vertex';
+      return 'hass:ray-vertex';
 
     case 'input_text':
-      return 'mdi:textbox';
+      return 'hass:textbox';
 
     case 'light':
-      return 'mdi:lightbulb';
+      return 'hass:lightbulb';
 
     case 'lock':
-      return state && state === 'unlocked' ? 'mdi:lock-open' : 'mdi:lock';
+      return state && state === 'unlocked' ? 'hass:lock-open' : 'hass:lock';
 
     case 'mailbox':
-      return 'mdi:mailbox';
+      return 'hass:mailbox';
 
     case 'media_player':
       return state && state !== 'off' && state !== 'idle' ?
-        'mdi:cast-connected' : 'mdi:cast';
+        'hass:cast-connected' : 'hass:cast';
 
     case 'notify':
-      return 'mdi:comment-alert';
+      return 'hass:comment-alert';
 
     case 'plant':
-      return 'mdi:flower';
+      return 'hass:flower';
 
     case 'proximity':
-      return 'mdi:apple-safari';
+      return 'hass:apple-safari';
 
     case 'remote':
-      return 'mdi:remote';
+      return 'hass:remote';
 
     case 'scene':
-      return 'mdi:google-pages';
+      return 'hass:google-pages';
 
     case 'script':
-      return 'mdi:file-document';
+      return 'hass:file-document';
 
     case 'sensor':
-      return 'mdi:eye';
+      return 'hass:eye';
 
     case 'simple_alarm':
-      return 'mdi:bell';
+      return 'hass:bell';
 
     case 'sun':
-      return 'mdi:white-balance-sunny';
+      return 'hass:white-balance-sunny';
 
     case 'switch':
-      return 'mdi:flash';
+      return 'hass:flash';
 
     case 'timer':
-      return 'mdi:timer';
+      return 'hass:timer';
 
     case 'updater':
-      return 'mdi:cloud-upload';
+      return 'hass:cloud-upload';
 
     case 'vacuum':
       return 'mdi:robot-vacuum';
 
     case 'weblink':
-      return 'mdi:open-in-new';
+      return 'hass:open-in-new';
 
     case 'zwave':
       switch (state) {
         case 'dead':
-          return 'mdi:emoticon-dead';
+          return 'hass:emoticon-dead';
         case 'sleeping':
-          return 'mdi:sleep';
+          return 'hass:sleep';
         case 'initializing':
-          return 'mdi:timer-sand';
+          return 'hass:timer-sand';
         default:
-          return 'mdi:nfc';
+          return 'hass:nfc';
       }
 
     default:
@@ -227,47 +227,47 @@
   var activated = state.state && state.state === 'off';
   switch (state.attributes.device_class) {
     case 'battery':
-      return activated ? 'mdi:battery' : 'mdi:battery-outline';
+      return activated ? 'hass:battery' : 'hass:battery-outline';
     case 'cold':
-      return activated ? 'mdi:thermometer' : 'mdi:snowflake';
+      return activated ? 'hass:thermometer' : 'hass:snowflake';
     case 'connectivity':
-      return activated ? 'mdi:server-network-off' : 'mdi:server-network';
+      return activated ? 'hass:server-network-off' : 'hass:server-network';
     case 'door':
-      return activated ? 'mdi:door-closed' : 'mdi:door-open';
+      return activated ? 'hass:door-closed' : 'hass:door-open';
     case 'garage_door':
-      return activated ? 'mdi:garage' : 'mdi:garage-open';
+      return activated ? 'hass:garage' : 'hass:garage-open';
     case 'gas':
     case 'power':
     case 'problem':
     case 'safety':
     case 'smoke':
-      return activated ? 'mdi:verified' : 'mdi:alert';
+      return activated ? 'hass:verified' : 'hass:alert';
     case 'heat':
-      return activated ? 'mdi:thermometer' : 'mdi:fire';
+      return activated ? 'hass:thermometer' : 'hass:fire';
     case 'light':
-      return activated ? 'mdi:brightness-5' : 'mdi:brightness-7';
+      return activated ? 'hass:brightness-5' : 'hass:brightness-7';
     case 'lock':
-      return activated ? 'mdi:lock' : 'mdi:lock-open';
+      return activated ? 'hass:lock' : 'hass:lock-open';
     case 'moisture':
-      return activated ? 'mdi:water-off' : 'mdi:water';
+      return activated ? 'hass:water-off' : 'hass:water';
     case 'motion':
-      return activated ? 'mdi:walk' : 'mdi:run';
+      return activated ? 'hass:walk' : 'hass:run';
     case 'occupancy':
-      return activated ? 'mdi:home-outline' : 'mdi:home';
+      return activated ? 'hass:home-outline' : 'hass:home';
     case 'opening':
-      return activated ? 'mdi:square' : 'mdi:square-outline';
+      return activated ? 'hass:square' : 'hass:square-outline';
     case 'plug':
-      return activated ? 'mdi:power-plug-off' : 'mdi:power-plug';
+      return activated ? 'hass:power-plug-off' : 'hass:power-plug';
     case 'presence':
-      return activated ? 'mdi:home-outline' : 'mdi:home';
+      return activated ? 'hass:home-outline' : 'hass:home';
     case 'sound':
-      return activated ? 'mdi:music-note-off' : 'mdi:music-note';
+      return activated ? 'hass:music-note-off' : 'hass:music-note';
     case 'vibration':
-      return activated ? 'mdi:crop-portrait' : 'mdi:vibrate';
+      return activated ? 'hass:crop-portrait' : 'hass:vibrate';
     case 'window':
-      return activated ? 'mdi:window-closed' : 'mdi:window-open';
+      return activated ? 'hass:window-closed' : 'hass:window-open';
     default:
-      return activated ? 'mdi:radiobox-blank' : 'mdi:checkbox-marked-circle';
+      return activated ? 'hass:radiobox-blank' : 'hass:checkbox-marked-circle';
   }
 };
 
@@ -275,9 +275,9 @@
   var open = state.state && state.state !== 'closed';
   switch (state.attributes.device_class) {
     case 'garage':
-      return open ? 'mdi:garage-open' : 'mdi:garage';
+      return open ? 'hass:garage-open' : 'hass:garage';
     default:
-      return open ? 'mdi:window-open' : 'mdi:window-closed';
+      return open ? 'hass:window-open' : 'hass:window-closed';
   }
 };
 
@@ -319,9 +319,9 @@
     return window.hassUtil.sensorIcon(state);
   } else if (domain === 'sensor' && unit) {
     if (unit === '°C' || unit === '°F') {
-      return 'mdi:thermometer';
+      return 'hass:thermometer';
     } else if (unit === 'Mice') {
-      return 'mdi:mouse-variant';
+      return 'hass:mouse-variant';
     }
   } else if (domain === 'binary_sensor') {
     return window.hassUtil.binarySensorIcon(state);
@@ -329,9 +329,9 @@
     return window.hassUtil.coverIcon(state);
   } else if (domain === 'input_datetime') {
     if (!state.attributes.has_date) {
-      return 'mdi:clock';
+      return 'hass:clock';
     } else if (!state.attributes.has_time) {
-      return 'mdi:calendar';
+      return 'hass:calendar';
     }
   }
 

From 892e33a1682b00bb813e3cd51444ed9cc420a988 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 19 Apr 2018 23:24:24 -0400
Subject: [PATCH 05/14] Lint

---
 gulp/tasks/hass-icons.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/gulp/tasks/hass-icons.js b/gulp/tasks/hass-icons.js
index a1c084bd1132..4c5e2a4f8884 100644
--- a/gulp/tasks/hass-icons.js
+++ b/gulp/tasks/hass-icons.js
@@ -53,6 +53,7 @@ async function generateHassIcons() {
   defs.childNodes = defs.childNodes.filter(icon => icons.has(icon.attrs[0].value));
 
   fs.writeFileSync('hass_frontend/hass_icons.html', parse5.serialize(iconDoc));
+  // eslint-disable-next-line
   console.log(`Home Assistant has ${icons.size} icons.`);
 }
 

From 39dfdfb6ea5291162ae924d519f2ff3671cd9694 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 22 Apr 2018 23:31:23 -0400
Subject: [PATCH 06/14] Hack reschedule

---
 src/components/ha-icon.html | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/ha-icon.html b/src/components/ha-icon.html
index 93e3e41a9243..28a53687f9cb 100644
--- a/src/components/ha-icon.html
+++ b/src/components/ha-icon.html
@@ -164,6 +164,10 @@
         return this.icon || !this.src;
       },
 
+      // This method has been adjusted from the original method.
+      //  - If iconset returns `null` for an icon, assume it's because iconset
+      //    children are not being done parsing and try again.
+      //  - Load the mdi iconset on demand if it's not loaded.
       /** @suppress {visibility} */
       _updateIcon: function() {
         if (this._usesIconset()) {
@@ -178,8 +182,28 @@
             this._iconset = /** @type {?Polymer.Iconset} */ (
                 this._meta.byKey(this._iconsetName));
             if (this._iconset) {
-              this._iconset.applyIcon(this, this._iconName, this.theme);
               this.unlisten(window, 'iron-iconset-added', '_updateIcon');
+              const rendered = this._iconset.applyIcon(this, this._iconName, this.theme);
+              if (rendered !== null) return;
+              // We got duped! Iconset still parsing. Reschedule.
+              // Check if another icon is already rescheduling this iconset.
+              if ('__ha_icon_reset_owner' in this._iconset &&
+                  this._iconset.__ha_icon_reset_owner !== this) {
+                return;
+              }
+              this._iconset.__ha_icon_reset_owner = this;
+
+              if (this._iconset.__ha_icon_reset_count === undefined) {
+                this._iconset.__ha_icon_reset_count = 0;
+              } else if (this._iconset.__ha_icon_reset_count > 10) {
+                // We've tried enough.
+                return;
+              }
+
+              // Reset icon cache and schedule retry.
+              this._iconset.__ha_icon_reset_count++;
+              this._iconset._icons = null;
+              setTimeout(() => this._updateIcon(), 100);
             } else {
               this.listen(window, 'iron-iconset-added', '_updateIcon');
               if (this._iconsetName === 'mdi' && !window.MDI_LOADED) {

From 7d1dc1e2b88bbfb295492309a1baeda244fd39be Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 29 Apr 2018 21:56:19 -0400
Subject: [PATCH 07/14] Revert mdi -> hass change for customize

---
 panels/config/customize/types/ha-customize-icon.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panels/config/customize/types/ha-customize-icon.html b/panels/config/customize/types/ha-customize-icon.html
index f69233cf11d0..013bdf772eb3 100644
--- a/panels/config/customize/types/ha-customize-icon.html
+++ b/panels/config/customize/types/ha-customize-icon.html
@@ -17,7 +17,7 @@
     </style>
     <iron-icon class="icon-image" icon="[[item.value]]"></iron-icon>
     <paper-input
-      auto-validate pattern="(hass:.*)?" error-message="Must start with 'hass:'"
+      auto-validate pattern="(mdi:.*)?" error-message="Must start with 'mdi:'"
       disabled='[[item.secondary]]'
       label='icon'
       value='{{item.value}}'>

From 24e8df9f791ca2068978095fb94b69581d2bea10 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 29 Apr 2018 21:58:47 -0400
Subject: [PATCH 08/14] Clarify on top of ha-icon what has changed

---
 src/components/ha-icon.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/ha-icon.html b/src/components/ha-icon.html
index 28a53687f9cb..2f4b999e1254 100644
--- a/src/components/ha-icon.html
+++ b/src/components/ha-icon.html
@@ -1,3 +1,8 @@
+<!--
+  FORKED FROM IRON-IRON
+
+  Changed made only to _updateIcon method.
+-->
 <!--
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

From a9026f7eea90f5c3bc637b0c6aab05695408a183 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 29 Apr 2018 22:29:35 -0400
Subject: [PATCH 09/14] Convert latest mdi icon references

---
 hassio/index.html                             |  2 +-
 js/panel-config/condition/condition_row.js    |  2 +-
 js/panel-config/script/action_row.js          |  2 +-
 js/panel-config/trigger/trigger_row.js        |  2 +-
 script/update_mdi.py                          | 63 -------------------
 src/cards/ha-weather-card.html                | 26 ++++----
 .../more-info/controls/more-info-weather.html | 36 +++++------
 src/util/hass-util.html                       | 28 ++++++---
 8 files changed, 55 insertions(+), 106 deletions(-)
 delete mode 100755 script/update_mdi.py

diff --git a/hassio/index.html b/hassio/index.html
index e8cf3df57af1..ef94080e4339 100644
--- a/hassio/index.html
+++ b/hassio/index.html
@@ -32,6 +32,6 @@
       }
     </script>
     <link rel='import' href='./hassio-app.html'>
-    <link rel='import' href='/static/mdi.html' async>
+    <link rel='import' href='/static/hass_icons.html' async>
   </body>
 </html>
diff --git a/js/panel-config/condition/condition_row.js b/js/panel-config/condition/condition_row.js
index 8dd1e40067e8..f777d5b359f3 100644
--- a/js/panel-config/condition/condition_row.js
+++ b/js/panel-config/condition/condition_row.js
@@ -27,7 +27,7 @@ export default class ConditionRow extends Component {
             vertical-offset="-5"
           >
             <paper-icon-button
-              icon="mdi:dots-vertical"
+              icon="hass:dots-vertical"
               slot="dropdown-trigger"
             />
             <paper-listbox slot="dropdown-content">
diff --git a/js/panel-config/script/action_row.js b/js/panel-config/script/action_row.js
index 286951fbd310..6eae30e6ff44 100644
--- a/js/panel-config/script/action_row.js
+++ b/js/panel-config/script/action_row.js
@@ -27,7 +27,7 @@ export default class Action extends Component {
             vertical-offset="-5"
           >
             <paper-icon-button
-              icon="mdi:dots-vertical"
+              icon="hass:dots-vertical"
               slot="dropdown-trigger"
             />
             <paper-listbox slot="dropdown-content">
diff --git a/js/panel-config/trigger/trigger_row.js b/js/panel-config/trigger/trigger_row.js
index 0cd1fe767d0e..ddd3f036d309 100644
--- a/js/panel-config/trigger/trigger_row.js
+++ b/js/panel-config/trigger/trigger_row.js
@@ -27,7 +27,7 @@ export default class TriggerRow extends Component {
             vertical-offset="-5"
           >
             <paper-icon-button
-              icon="mdi:dots-vertical"
+              icon="hass:dots-vertical"
               slot="dropdown-trigger"
             />
             <paper-listbox slot="dropdown-content">
diff --git a/script/update_mdi.py b/script/update_mdi.py
deleted file mode 100755
index ae9225773a4e..000000000000
--- a/script/update_mdi.py
+++ /dev/null
@@ -1,63 +0,0 @@
-#!/usr/bin/env python3
-"""Download the latest Polymer v1 iconset for materialdesignicons.com."""
-import os
-import re
-import sys
-import urllib.request
-
-GETTING_STARTED_URL = ('https://raw.githubusercontent.com/Templarian/'
-                       'MaterialDesign/master/site/getting-started.savvy')
-DOWNLOAD_LINK = re.compile(r'(/api/download/polymer/v1/([A-Z0-9-]{36}))')
-START_ICONSET = '<iron-iconset-svg'
-
-OUTPUT_BASE = 'hass_frontend'
-ICONSET_OUTPUT = os.path.join(OUTPUT_BASE, 'mdi.html')
-
-
-def get_text(url):
-    with urllib.request.urlopen(url) as f:
-        return f.read().decode('utf-8')
-
-
-def get_remote_version():
-    """Get current version and download link."""
-    gs_page = get_text(GETTING_STARTED_URL)
-
-    mdi_download = re.search(DOWNLOAD_LINK, gs_page)
-
-    if not mdi_download:
-        print("Unable to find download link")
-        sys.exit()
-
-    return 'https://materialdesignicons.com' + mdi_download.group(1)
-
-
-def clean_component(source):
-    """Clean component."""
-    return source[source.index(START_ICONSET):]
-
-
-def write_component(source):
-    """Write component."""
-    with open(ICONSET_OUTPUT, 'w') as outp:
-        print('Writing icons to', ICONSET_OUTPUT)
-        outp.write(source)
-
-
-def main():
-    """Main section of the script."""
-    # All scripts should have their current work dir set to project root
-    if os.path.basename(os.getcwd()) == 'script':
-        os.chdir('..')
-
-    print("materialdesignicons.com icon updater")
-
-    remote_url = get_remote_version()
-    source = clean_component(get_text(remote_url))
-    write_component(source)
-
-    print('Updated to latest version')
-
-
-if __name__ == '__main__':
-    main()
diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index 8c5145f1fe09..8ec99803339d 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -134,20 +134,20 @@
       'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N'
     ];
     this.weatherIcons = {
-      'clear-night': 'mdi:weather-night',
-      cloudy: 'mdi:weather-cloudy',
-      fog: 'mdi:weather-fog',
-      hail: 'mdi:weather-hail',
+      'clear-night': 'hass:weather-night',
+      cloudy: 'hass:weather-cloudy',
+      fog: 'hass:weather-fog',
+      hail: 'hass:weather-hail',
       lightning: 'mid:weather-lightning',
-      'lightning-rainy': 'mdi:weather-lightning-rainy',
-      partlycloudy: 'mdi:weather-partlycloudy',
-      pouring: 'mdi:weather-pouring',
-      rainy: 'mdi:weather-rainy',
-      snowy: 'mdi:weather-snowy',
-      'snowy-rainy': 'mdi:weather-snowy-rainy',
-      sunny: 'mdi:weather-sunny',
-      windy: 'mdi:weather-windy',
-      'windy-variant': 'mdi:weather-windy-variant'
+      'lightning-rainy': 'hass:weather-lightning-rainy',
+      partlycloudy: 'hass:weather-partlycloudy',
+      pouring: 'hass:weather-pouring',
+      rainy: 'hass:weather-rainy',
+      snowy: 'hass:weather-snowy',
+      'snowy-rainy': 'hass:weather-snowy-rainy',
+      sunny: 'hass:weather-sunny',
+      windy: 'hass:weather-windy',
+      'windy-variant': 'hass:weather-windy-variant'
     };
   }
 
diff --git a/src/dialogs/more-info/controls/more-info-weather.html b/src/dialogs/more-info/controls/more-info-weather.html
index ce30c727c6ef..cf8c53073740 100644
--- a/src/dialogs/more-info/controls/more-info-weather.html
+++ b/src/dialogs/more-info/controls/more-info-weather.html
@@ -43,30 +43,30 @@
     </style>
 
     <div class="flex">
-      <iron-icon icon="mdi:thermometer"></iron-icon>
+      <iron-icon icon="hass:thermometer"></iron-icon>
       <div class="main">[[localize('ui.card.weather.attributes.temperature')]]</div>
       <div>[[stateObj.attributes.temperature]] [[getUnit('temperature')]]</div>
     </div>
     <div class="flex">
-      <iron-icon icon="mdi:water-percent"></iron-icon>
+      <iron-icon icon="hass:water-percent"></iron-icon>
       <div class="main">[[localize('ui.card.weather.attributes.humidity')]]</div>
       <div>[[stateObj.attributes.humidity]] %</div>
     </div>
     <template is="dom-if" if="[[stateObj.attributes.visibility]]">
       <div class="flex">
-        <iron-icon icon="mdi:eye"></iron-icon>
+        <iron-icon icon="hass:eye"></iron-icon>
         <div class="main">[[localize('ui.card.weather.attributes.visibility')]]</div>
         <div>[[stateObj.attributes.visibility]] [[getUnit('length')]]</div>
       </div>
     </template>
     <div class="flex">
-      <iron-icon icon="mdi:weather-windy"></iron-icon>
+      <iron-icon icon="hass:weather-windy"></iron-icon>
       <div class="main">[[localize('ui.card.weather.attributes.wind_speed')]]</div>
       <div>[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]</div>
     </div>
     <template is="dom-if" if="[[stateObj.attributes.pressure]]">
       <div class="flex">
-        <iron-icon icon="mdi:gauge"></iron-icon>
+        <iron-icon icon="hass:gauge"></iron-icon>
         <div class="main">[[localize('ui.card.weather.attributes.air_pressure')]]</div>
         <div>[[stateObj.attributes.pressure]] hPa</div>
       </div>
@@ -115,20 +115,20 @@
       'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N'
     ];
     this.weatherIcons = {
-      'clear-night': 'mdi:weather-night',
-      cloudy: 'mdi:weather-cloudy',
-      fog: 'mdi:weather-fog',
-      hail: 'mdi:weather-hail',
+      'clear-night': 'hass:weather-night',
+      cloudy: 'hass:weather-cloudy',
+      fog: 'hass:weather-fog',
+      hail: 'hass:weather-hail',
       lightning: 'mid:weather-lightning',
-      'lightning-rainy': 'mdi:weather-lightning-rainy',
-      partlycloudy: 'mdi:weather-partlycloudy',
-      pouring: 'mdi:weather-pouring',
-      rainy: 'mdi:weather-rainy',
-      snowy: 'mdi:weather-snowy',
-      'snowy-rainy': 'mdi:weather-snowy-rainy',
-      sunny: 'mdi:weather-sunny',
-      windy: 'mdi:weather-windy',
-      'windy-variant': 'mdi:weather-windy-variant'
+      'lightning-rainy': 'hass:weather-lightning-rainy',
+      partlycloudy: 'hass:weather-partlycloudy',
+      pouring: 'hass:weather-pouring',
+      rainy: 'hass:weather-rainy',
+      snowy: 'hass:weather-snowy',
+      'snowy-rainy': 'hass:weather-snowy-rainy',
+      sunny: 'hass:weather-sunny',
+      windy: 'hass:weather-windy',
+      'windy-variant': 'hass:weather-windy-variant'
     };
   }
 
diff --git a/src/util/hass-util.html b/src/util/hass-util.html
index 45d9b8692f3c..674b1693757e 100644
--- a/src/util/hass-util.html
+++ b/src/util/hass-util.html
@@ -198,7 +198,7 @@
       return 'hass:cloud-upload';
 
     case 'vacuum':
-      return 'mdi:robot-vacuum';
+      return 'hass:robot-vacuum';
 
     case 'weblink':
       return 'hass:open-in-new';
@@ -285,23 +285,35 @@
   switch (state.attributes.device_class) {
     case 'battery': {
       if (isNaN(state.state)) {
-        return 'mdi:battery-unknown';
+        return 'hass:battery-unknown';
       }
       const batteryRound = Math.round(state.state / 10) * 10;
       if (batteryRound >= 100) {
-        return 'mdi:battery';
+        return 'hass:battery';
       }
       if (batteryRound <= 0) {
-        return 'mdi:battery-alert';
+        return 'hass:battery-alert';
       }
-      return `mdi:battery-${batteryRound}`;
+      /*
+        Possible values (listed so we extract them):
+         - hass:battery-10
+         - hass:battery-20
+         - hass:battery-30
+         - hass:battery-40
+         - hass:battery-50
+         - hass:battery-60
+         - hass:battery-70
+         - hass:battery-80
+         - hass:battery-90
+      */
+      return `hass:battery-${batteryRound}`;
     }
     case 'humidity':
-      return 'mdi:water-percent';
+      return 'hass:water-percent';
     case 'temperature':
-      return 'mdi:thermometer';
+      return 'hass:thermometer';
     default:
-      return 'mdi:eye';
+      return 'hass:eye';
   }
 };
 

From 004ef4c863f1cfe38082e1c7b30bb64164efe189 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 29 Apr 2018 22:30:01 -0400
Subject: [PATCH 10/14] Convert python script to JS

---
 gulp/common/http.js          | 25 +++++++++++++++++++++++++
 gulp/tasks/gen-index-html.js |  4 ++--
 gulp/tasks/hass-icons.js     | 36 ++++++++++++++++++++++++++++++++++--
 script/build_frontend        |  2 +-
 4 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 gulp/common/http.js

diff --git a/gulp/common/http.js b/gulp/common/http.js
new file mode 100644
index 000000000000..2391156105a5
--- /dev/null
+++ b/gulp/common/http.js
@@ -0,0 +1,25 @@
+// From https://www.tomas-dvorak.cz/posts/nodejs-request-without-dependencies/
+const http = require('http');
+const https = require('https');
+
+module.exports.getContent = function getContent(url) {
+  // return new pending promise
+  return new Promise((resolve, reject) => {
+    // select http or https module, depending on reqested url
+    const lib = url.startsWith('https') ? https : http;
+    const request = lib.get(url, (response) => {
+      // handle http errors
+      if (response.statusCode < 200 || response.statusCode > 299) {
+        reject(new Error('Failed to load page, status code: ' + response.statusCode));
+      }
+      // temporary data holder
+      const body = [];
+      // on every content chunk, push it to the data array
+      response.on('data', chunk => body.push(chunk));
+      // we are done, resolve promise with those joined chunks
+      response.on('end', () => resolve(body.join('')));
+    });
+    // handle connection errors of the request
+    request.on('error', err => reject(err));
+  });
+};
diff --git a/gulp/tasks/gen-index-html.js b/gulp/tasks/gen-index-html.js
index 4b91a9ac8f87..a70ad1c1ff5a 100644
--- a/gulp/tasks/gen-index-html.js
+++ b/gulp/tasks/gen-index-html.js
@@ -19,8 +19,8 @@ function generateIndex(es6) {
   const toReplace = [
     // Needs to look like a color during CSS minifiaction
     ['{{ theme_color }}', '#THEME'],
-    ['/home-assistant-polymer/hass_frontend/mdi.html',
-      `/static/mdi-${md5(path.resolve(config.output, 'mdi.html'))}.html`],
+    ['/home-assistant-polymer/hass_frontend/hass_icons.html',
+      `/static/hass_icons-${md5(path.resolve(config.output, 'hass_icons.html'))}.html`],
   ];
 
   if (!es6) {
diff --git a/gulp/tasks/hass-icons.js b/gulp/tasks/hass-icons.js
index 4c5e2a4f8884..99950a518cec 100644
--- a/gulp/tasks/hass-icons.js
+++ b/gulp/tasks/hass-icons.js
@@ -2,7 +2,9 @@ const gulp = require('gulp');
 const path = require('path');
 const fs = require('fs');
 const parse5 = require('parse5');
+const getContent = require('../common/http').getContent;
 
+const outputDir = 'hass_frontend';
 const iconRegEx = /hass:[\w-]+/g;
 
 function mapFiles(startPath, filter, mapFunc) {
@@ -37,7 +39,7 @@ function findIcons() {
   return icons;
 }
 
-async function generateHassIcons() {
+function generateHassIcons() {
   const icons = findIcons();
 
   const iconDoc = parse5.parseFragment(fs.readFileSync('hass_frontend/mdi.html', { encoding: 'utf-8' }));
@@ -57,4 +59,34 @@ async function generateHassIcons() {
   console.log(`Home Assistant has ${icons.size} icons.`);
 }
 
-gulp.task('gen-hass-icons', generateHassIcons);
+async function downloadMDIIcons() {
+  // Fetch website of MaterialDesignIcons.com
+  const content = await getContent('https://raw.githubusercontent.com/Templarian/MaterialDesign/master/site/getting-started.savvy');
+  // Find link to Polymer v1 download
+  const downloadMatch = content.match('(/api/download/polymer/v1/([A-Z0-9-]{36}))');
+
+  if (!downloadMatch) {
+    console.error('Unable to find Polymer v1 download link');
+    return null;
+  }
+
+  // Download iconset
+  let iconSet = await getContent(`https://materialdesignicons.com${downloadMatch[0]}`);
+
+  // Strip out the import statement
+  iconSet = iconSet.substr(iconSet.indexOf('<iron-iconset-svg'));
+
+  return iconSet;
+}
+
+async function main() {
+  const iconSet = await downloadMDIIcons();
+
+  if (iconSet === null) throw new Error('Download MDI failed!');
+
+  fs.writeFileSync('hass_frontend/mdi.html', iconSet);
+  generateHassIcons();
+}
+
+// gulp.task('gen-hass-icons', generateHassIcons);
+gulp.task('gen-icons', main);
diff --git a/script/build_frontend b/script/build_frontend
index afb778d8f22f..860c98f39c5e 100755
--- a/script/build_frontend
+++ b/script/build_frontend
@@ -42,7 +42,7 @@ cp bower_components/webcomponentsjs/webcomponents-lite.js $OUTPUT_DIR
 cp bower_components/webcomponentsjs/custom-elements-es5-adapter.js $OUTPUT_DIR_ES5
 
 # Icons
-script/update_mdi.py
+gulp gen-icons
 
 # Leaflet
 mkdir $OUTPUT_DIR/images/leaflet

From 4458501a0189beb1d64a3afae2f5a2e7d1965cbc Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 29 Apr 2018 22:32:23 -0400
Subject: [PATCH 11/14] BUILD_DEV=0 all the things

---
 script/build_frontend | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/script/build_frontend b/script/build_frontend
index 860c98f39c5e..90582b086f3f 100755
--- a/script/build_frontend
+++ b/script/build_frontend
@@ -42,7 +42,7 @@ cp bower_components/webcomponentsjs/webcomponents-lite.js $OUTPUT_DIR
 cp bower_components/webcomponentsjs/custom-elements-es5-adapter.js $OUTPUT_DIR_ES5
 
 # Icons
-gulp gen-icons
+BUILD_DEV=0 gulp gen-icons
 
 # Leaflet
 mkdir $OUTPUT_DIR/images/leaflet
@@ -55,7 +55,7 @@ cp build-es5/service_worker.js $OUTPUT_DIR_ES5
 BUILD_DEV=0 ./node_modules/.bin/gulp gen-service-worker
 cp build/service_worker.js $OUTPUT_DIR
 
-./node_modules/.bin/gulp compress
+BUILD_DEV=0 ./node_modules/.bin/gulp compress
 
 # Generate the __init__ file
 echo "VERSION = '`git rev-parse HEAD`'" >> $OUTPUT_DIR/__init__.py
@@ -66,5 +66,5 @@ echo "CREATED_AT = `date +%s`" >> $OUTPUT_DIR_ES5/__init__.py
 # Generate the MD5 hash of the new frontend
 script/fingerprint_frontend.py --base_dir $OUTPUT_DIR
 script/fingerprint_frontend.py --base_dir $OUTPUT_DIR_ES5
-./node_modules/.bin/gulp gen-index-html
-./node_modules/.bin/gulp gen-index-html-es5
+BUILD_DEV=0 ./node_modules/.bin/gulp gen-index-html
+BUILD_DEV=0 ./node_modules/.bin/gulp gen-index-html-es5

From 69f22d59da3300b2ff8b63b7b793f19c621ef8f7 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 29 Apr 2018 22:51:33 -0400
Subject: [PATCH 12/14] Embed built-in panel icons

---
 gulp/tasks/gen-service-worker.js |  3 ++-
 gulp/tasks/hass-icons.js         | 18 ++++++++++++++----
 script/build_frontend            |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/gulp/tasks/gen-service-worker.js b/gulp/tasks/gen-service-worker.js
index 241637e10f42..bf61c408b36a 100755
--- a/gulp/tasks/gen-service-worker.js
+++ b/gulp/tasks/gen-service-worker.js
@@ -23,7 +23,6 @@ const DEV = !!JSON.parse(process.env.BUILD_DEV || 'true');
 const dynamicUrlToDependencies = {};
 
 const staticFingerprinted = [
-  'mdi.html',
   'translations/en.json',
 ];
 
@@ -80,6 +79,8 @@ function generateServiceWorker(es6) {
       directoryIndex: '',
       dynamicUrlToDependencies: dynamicUrlToDependencies,
       staticFileGlobs: [
+        baseRootDir + '/hass_icons.html',
+        baseRootDir + '/mdi.html',
         baseRootDir + '/icons/favicon.ico',
         baseRootDir + '/icons/favicon-192x192.png',
         baseRootDir + '/webcomponents-lite.min.js',
diff --git a/gulp/tasks/hass-icons.js b/gulp/tasks/hass-icons.js
index 99950a518cec..c2a448a3e426 100644
--- a/gulp/tasks/hass-icons.js
+++ b/gulp/tasks/hass-icons.js
@@ -7,6 +7,16 @@ const getContent = require('../common/http').getContent;
 const outputDir = 'hass_frontend';
 const iconRegEx = /hass:[\w-]+/g;
 
+const BUILT_IN_PANEL_ICONS = [
+  'settings', // Config
+  'home-assistant', // Hass.io
+  'poll-box', // History panel
+  'format-list-bulleted-type', // Logbook
+  'mailbox', // Mailbox
+  'account-location', // Map
+  'cart', // Shopping List
+];
+
 function mapFiles(startPath, filter, mapFunc) {
   const files = fs.readdirSync(startPath);
   for (let i = 0; i < files.length; i++) {
@@ -22,7 +32,7 @@ function mapFiles(startPath, filter, mapFunc) {
 
 
 function findIcons() {
-  const icons = new Set();
+  const icons = new Set(BUILT_IN_PANEL_ICONS);
   function processFile(filename) {
     const content = fs.readFileSync(filename);
     let match;
@@ -42,7 +52,7 @@ function findIcons() {
 function generateHassIcons() {
   const icons = findIcons();
 
-  const iconDoc = parse5.parseFragment(fs.readFileSync('hass_frontend/mdi.html', { encoding: 'utf-8' }));
+  const iconDoc = parse5.parseFragment(fs.readFileSync(`${outputDir}/mdi.html`, { encoding: 'utf-8' }));
 
   const ironIconset = iconDoc.childNodes[0];
   ironIconset.attrs.forEach((attr) => {
@@ -54,7 +64,7 @@ function generateHassIcons() {
   const defs = ironIconset.childNodes[0].childNodes[0];
   defs.childNodes = defs.childNodes.filter(icon => icons.has(icon.attrs[0].value));
 
-  fs.writeFileSync('hass_frontend/hass_icons.html', parse5.serialize(iconDoc));
+  fs.writeFileSync(`${outputDir}/hass_icons.html`, parse5.serialize(iconDoc));
   // eslint-disable-next-line
   console.log(`Home Assistant has ${icons.size} icons.`);
 }
@@ -84,7 +94,7 @@ async function main() {
 
   if (iconSet === null) throw new Error('Download MDI failed!');
 
-  fs.writeFileSync('hass_frontend/mdi.html', iconSet);
+  fs.writeFileSync(`${outputDir}/mdi.html`, iconSet);
   generateHassIcons();
 }
 
diff --git a/script/build_frontend b/script/build_frontend
index 90582b086f3f..ab161605634c 100755
--- a/script/build_frontend
+++ b/script/build_frontend
@@ -42,7 +42,7 @@ cp bower_components/webcomponentsjs/webcomponents-lite.js $OUTPUT_DIR
 cp bower_components/webcomponentsjs/custom-elements-es5-adapter.js $OUTPUT_DIR_ES5
 
 # Icons
-BUILD_DEV=0 gulp gen-icons
+BUILD_DEV=0 ./node_modules/.bin/gulp gen-icons
 
 # Leaflet
 mkdir $OUTPUT_DIR/images/leaflet

From 408cedec76c79292221cff94ee13990bb8326986 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 29 Apr 2018 23:04:02 -0400
Subject: [PATCH 13/14] service worker hass icons fix

---
 gulp/tasks/gen-service-worker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gulp/tasks/gen-service-worker.js b/gulp/tasks/gen-service-worker.js
index bf61c408b36a..9d874295d29b 100755
--- a/gulp/tasks/gen-service-worker.js
+++ b/gulp/tasks/gen-service-worker.js
@@ -23,6 +23,7 @@ const DEV = !!JSON.parse(process.env.BUILD_DEV || 'true');
 const dynamicUrlToDependencies = {};
 
 const staticFingerprinted = [
+  'hass_icons.html',
   'translations/en.json',
 ];
 
@@ -79,7 +80,6 @@ function generateServiceWorker(es6) {
       directoryIndex: '',
       dynamicUrlToDependencies: dynamicUrlToDependencies,
       staticFileGlobs: [
-        baseRootDir + '/hass_icons.html',
         baseRootDir + '/mdi.html',
         baseRootDir + '/icons/favicon.ico',
         baseRootDir + '/icons/favicon-192x192.png',

From 7e46d4e3b6e9c0996293d9ddfa5ab9006e42a076 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 29 Apr 2018 23:05:12 -0400
Subject: [PATCH 14/14] Lint

---
 gulp/tasks/hass-icons.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/gulp/tasks/hass-icons.js b/gulp/tasks/hass-icons.js
index c2a448a3e426..c70637464cff 100644
--- a/gulp/tasks/hass-icons.js
+++ b/gulp/tasks/hass-icons.js
@@ -76,6 +76,7 @@ async function downloadMDIIcons() {
   const downloadMatch = content.match('(/api/download/polymer/v1/([A-Z0-9-]{36}))');
 
   if (!downloadMatch) {
+    // eslint-disable-next-line
     console.error('Unable to find Polymer v1 download link');
     return null;
   }