fix: offline icons not showing #508 (#537)

index.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Zwave To MQTT</title>
-    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
     <!--Favicons-->
     <meta name=mobile-web-app-capable content=yes>
     <meta name=theme-color content=#fff>

package.json

@@ -127,7 +127,6 @@
     "@babel/plugin-syntax-jsx": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.10.1",
     "@babel/preset-env": "^7.9.6",
-    "@mdi/font": "^5.3.45",
     "auto-changelog": "^2.0.0",
     "autoprefixer": "^9.8.0",
     "babel-eslint": "^10.1.0",
@@ -158,6 +157,7 @@
     "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^4.3.0",
     "lodash": "^4.17.15",
+    "material-design-icons-iconfont": "^5.0.1",
     "mini-css-extract-plugin": "^0.9.0",
     "mocha": "^7.2.0",
     "node-notifier": "^7.0.1",

src/plugins/vuetify.js

@@ -3,10 +3,14 @@
 import Vue from 'vue'
 import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'
-import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
+import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
 
 Vue.use(Vuetify)
 
-const opts = {}
+const opts = {
+  icons: {
+    iconfont: 'md'
+  }
+}
 
 export default new Vuetify(opts)