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.

Answer 1

ok, I finally got it working in VS Code.

npm install material-design-icons-iconfont

COPY the folder from the node_modules into you public/css folder (This is what I didn't do before)

Modify the material-design-icons.css file by changing the urls to start with

 url('/css/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular

- in the index.html page of your project, add

<link rel="stylesheet" href="css/material-design-icons-iconfont/dist/material-design-icons.css">

Answer 2

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'
})