Vuetify / Offline icons

Question

I have the following code for a menu and menu button. I am using Vue CLI 3 and Vuetify

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
...
<v-navigation-drawer fixed app v-model="drawer">
  <MyMenu/>
</v-navigation-drawer>
<v-toolbar fixed app>
  <v-toolbar-title class="headline text-uppercase">
    <v-toolbar-side-icon @click.stop="drawer = !drawer"/>
  </v-toolbar-title>
</v-toolbar>

The code works great when the computer is online. However when the computer is offline the menu button icon doesn't show up. Instead it is just replaced with the text 'MENU'. I have looked into installing (vue-material-design-icons, material-design-icons and material-design-icons-iconfont) via npm but have not had any luck getting the icon to display when the computer is offline. I'm not sure if there's a special way to wire it together that I'm unaware of. Can anyone provide insight as to how to solve this issue?

I've read a bunch of links such as https://github.com/vuetifyjs/cordova/issues/11 and How to host material icons offline? but I could not get them to work for me.

You'll have to self-host. It would help if you detailed what you tried, and what went wrong attempting it. — ceejayoz
Unfortunately I did not write down all my attempts, results, etc. The list would be too long — ekjcfn3902039
Well, the accepted answer in the SO thread you linked looks like the right way to go about it. Give it a shot and come back with specific issues you encounter for us to fix. — ceejayoz
I did an npm install of material-design-icons, modified the node_modules/material-design-icons/iconfont/material-icons.css file to contain relative urls (ex:url("node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff), restarted the server, forced a page refresh and the icon is still missing — ekjcfn3902039
OK, so now check the browser console. See if the fonts are attempting to load, and look for any errors. — ceejayoz

JTInfinite JTInfinite · Accepted Answer · 2019-04-24T11:24:43

Vuetify address this in their documentation:

https://vuetifyjs.com/en/framework/icons#installing-fonts

Essentially:

npm install material-design-icons-iconfont -D

Then:

// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  iconfont: 'md'
})

Vuetify / Offline icons

2 Answers