diff --git a/.gitignore b/.gitignore
index e9f2208381..c7368a40b8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+build
 build-translations/*
 hassio/build-es5/*
 node_modules/*
diff --git a/gulp/tasks/gen-icons.js b/gulp/tasks/gen-icons.js
new file mode 100644
index 0000000000..dd4372500d
--- /dev/null
+++ b/gulp/tasks/gen-icons.js
@@ -0,0 +1,40 @@
+const gulp = require('gulp');
+const path = require('path');
+const fs = require('fs');
+const config = require('../config');
+
+const ICON_PACKAGE_PATH = path.resolve(__dirname, '../../node_modules/@mdi/svg/');
+const META_PATH = path.resolve(ICON_PACKAGE_PATH, 'meta.json');
+const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, 'svg');
+const OUTPUT_PATH = path.resolve(__dirname, '../../build/mdi.html');
+
+function iconPath(name) {
+  return path.resolve(ICON_PATH, `${name}.svg`);
+}
+
+function loadIcon(name) {
+  return fs.readFileSync(iconPath(name), 'utf-8');
+}
+
+function transformXMLtoPolymer(name, xml) {
+  const start = xml.indexOf('><path') + 1;
+  const end = xml.length - start - 6;
+  const path = xml.substr(start, end);
+  return `<g id="${name}">${path}</g>`;
+}
+
+function generateIconset(name, iconDefs) {
+  return `
+<ha-iconset-svg name="${name}" size="24"><svg><defs>
+${iconDefs}
+</defs></svg></ha-iconset-svg>
+  `;
+}
+
+async function genIcons(es6) {
+  const meta = JSON.parse(fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), 'UTF-8'));
+  const iconDefs = meta.map(iconInfo => transformXMLtoPolymer(iconInfo.name, loadIcon(iconInfo.name))).join('');
+  fs.writeFileSync(OUTPUT_PATH, generateIconset('mdi', iconDefs));
+}
+
+gulp.task('gen-icons', () => genIcons(/* es6= */ true));
diff --git a/gulp/tasks/gen-index-html.js b/gulp/tasks/gen-index-html.js
index 4365d5c8fe..76c128f94d 100644
--- a/gulp/tasks/gen-index-html.js
+++ b/gulp/tasks/gen-index-html.js
@@ -18,8 +18,8 @@ function generateIndex(es6) {
   const toReplace = [
     // Needs to look like a color during CSS minifiaction
     ['{{ theme_color }}', '#THEME'],
-    ['/static/mdi.html',
-      `/static/mdi-${md5(path.resolve(config.output, 'mdi.html'))}.html`],
+    ['/frontend_latest/mdi.js',
+      `/frontend_latest/mdi-${md5(path.resolve(config.output, 'mdi.js'))}.js`],
   ];
 
   if (!es6) {
diff --git a/index.html b/index.html
index d4b508b58d..7c516a54ad 100644
--- a/index.html
+++ b/index.html
@@ -99,7 +99,7 @@
     <!--EXTRA_SCRIPTS-->
     <script src='/frontend_latest/core.js'></script>
     <script src='/frontend_latest/app.js'></script>
-    <link rel='import' href='/static/mdi.html' async>
+    <script src='/frontend_latest/mdi.js' async></script>
     {% for extra_url in extra_urls -%}
       <link rel='import' href='{{ extra_url }}' async>
     {% endfor -%}
diff --git a/package.json b/package.json
index 65e978e7eb..b865693814 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
+    "@mdi/svg": "^2.4.85",
     "@polymer/app-layout": "^3.0.0-pre.18",
     "@polymer/app-localize-behavior": "^3.0.0-pre.18",
     "@polymer/app-route": "^3.0.0-pre.18",
@@ -112,6 +113,7 @@
     "gulp-uglify": "^3.0.0",
     "gulp-util": "^3.0.8",
     "gulp-zopfli": "^1.0.0",
+    "html-loader": "^0.5.5",
     "html-minifier": "^3.5.6",
     "merge-stream": "^1.0.1",
     "mocha": "^5.0.0",
diff --git a/public/mdi.html b/public/mdi.html
new file mode 100644
index 0000000000..5ab91371c4
--- /dev/null
+++ b/public/mdi.html
@@ -0,0 +1,2 @@
+<!-- For backwards compat for Hass.io -->
+<script src='./mdi.js'></script>
diff --git a/script/build_frontend b/script/build_frontend
index bcff9d176f..83694363f8 100755
--- a/script/build_frontend
+++ b/script/build_frontend
@@ -15,12 +15,9 @@ mkdir $OUTPUT_DIR_ES5
 cp -r public/__init__.py $OUTPUT_DIR_ES5/
 
 # Build frontend
-BUILD_DEV=0 ./node_modules/.bin/gulp build-translations
+./node_modules/.bin/gulp build-translations gen-icons
 NODE_ENV=production ./node_modules/.bin/webpack
 
-# Icons
-script/update_mdi.py
-
 ./node_modules/.bin/gulp compress
 
 # Generate the __init__ file
diff --git a/script/develop b/script/develop
index 488f7b6b89..6b4b96a13f 100755
--- a/script/develop
+++ b/script/develop
@@ -13,14 +13,11 @@ mkdir $OUTPUT_DIR_ES5
 # Needed in case frontend repo installed with pip3 install -e
 cp -r public/__init__.py $OUTPUT_DIR_ES5/
 
-./node_modules/.bin/gulp build-translations
+./node_modules/.bin/gulp build-translations gen-icons
 cp src/authorize.html $OUTPUT_DIR
 
 # Manually copy over this file as we don't run the ES5 build
 # The Hass.io panel depends on it.
 cp node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js $OUTPUT_DIR_ES5
 
-# Icons
-script/update_mdi.py
-
 ./node_modules/.bin/webpack --watch --progress
diff --git a/src/entrypoints/mdi.js b/src/entrypoints/mdi.js
new file mode 100644
index 0000000000..f581e82d94
--- /dev/null
+++ b/src/entrypoints/mdi.js
@@ -0,0 +1,6 @@
+import iconSetContent from '../../build/mdi.html';
+
+const documentContainer = document.createElement('template');
+documentContainer.setAttribute('style', 'display: none;');
+documentContainer.innerHTML = iconSetContent;
+document.head.appendChild(documentContainer.content);
diff --git a/webpack.config.js b/webpack.config.js
index 130b85d99c..5a1bc8f21f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -64,6 +64,7 @@ function createConfig(isProdBuild, latestBuild) {
     copyPluginOpts.push('node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js')
     copyPluginOpts.push({ from: 'node_modules/leaflet/dist/leaflet.css', to: `images/leaflet/` });
     copyPluginOpts.push({ from: 'node_modules/leaflet/dist/images', to: `images/leaflet/` });
+    entry.mdi = './src/entrypoints/mdi.js';
   } else {
     copyPluginOpts.push('node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js');
     babelOptions.presets = [
@@ -98,6 +99,15 @@ function createConfig(isProdBuild, latestBuild) {
             loader: 'babel-loader',
             options: babelOptions,
           },
+        },
+        {
+          test: /\.(html)$/,
+          use: {
+            loader: 'html-loader',
+            options: {
+              exportAsEs6Default: true,
+            }
+          }
         }
       ]
     },
diff --git a/yarn.lock b/yarn.lock
index 930e1a3bc9..3858e78c01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -573,6 +573,10 @@
     lodash "^4.17.5"
     to-fast-properties "^2.0.0"
 
+"@mdi/svg@^2.4.85":
+  version "2.4.85"
+  resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-2.4.85.tgz#b707508ff08597a63f3fa5f4a138be8c3d85ed0b"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2288,6 +2292,10 @@ ast-types@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.3.tgz#c20757fe72ee71278ea0ff3d87e5c2ca30d9edf8"
 
+ast-types@0.9.6:
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
+
 async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
@@ -5020,6 +5028,13 @@ es6-promise@^4.0.5:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.4.tgz#dc4221c2b16518760bd8c39a52d8f356fc00ed29"
 
+es6-templates@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
+  dependencies:
+    recast "~0.11.12"
+    through "~2.3.6"
+
 escape-html@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.1.tgz#181a286ead397a39a92857cfb1d43052e356bff0"
@@ -5167,6 +5182,10 @@ esprima@^4.0.0, esprima@~4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
 
+esprima@~3.1.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+
 esquery@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
@@ -5486,6 +5505,10 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
+fastparse@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+
 fbjs@^0.8.16:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
@@ -6739,6 +6762,16 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
+html-loader@^0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.5.tgz#6356dbeb0c49756d8ebd5ca327f16ff06ab5faea"
+  dependencies:
+    es6-templates "^0.2.3"
+    fastparse "^1.1.1"
+    html-minifier "^3.5.8"
+    loader-utils "^1.1.0"
+    object-assign "^4.1.1"
+
 html-minifier@^1.1.1:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-1.5.0.tgz#beb05fd9cc340945865c10f40aedf469af4b1534"
@@ -6777,6 +6810,18 @@ html-minifier@^3.5.6:
     relateurl "0.2.x"
     uglify-js "3.1.x"
 
+html-minifier@^3.5.8:
+  version "3.5.16"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.16.tgz#39f5aabaf78bdfc057fe67334226efd7f3851175"
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "4.1.x"
+    commander "2.15.x"
+    he "1.1.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "3.3.x"
+
 htmllint@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/htmllint/-/htmllint-0.2.7.tgz#df3ebd82b917ce2c8d78e4eb7929831b5a0e5bea"
@@ -10219,6 +10264,15 @@ recast@^0.14.1:
     private "~0.1.5"
     source-map "~0.6.1"
 
+recast@~0.11.12:
+  version "0.11.23"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
+  dependencies:
+    ast-types "0.9.6"
+    esprima "~3.1.0"
+    private "~0.1.5"
+    source-map "~0.5.0"
+
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -11186,7 +11240,7 @@ source-map@0.4.x:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
@@ -11760,7 +11814,7 @@ through2@^2.0.0, through2@^2.0.1, through2@^2.0.3, through2@~2.0.0:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@2, through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1:
+through@2, through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1, through@~2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"