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, Dec 10 '18 at 19:57
Unfortunately I did not write down all my attempts, results, etc. The list would be too long — ekjcfn3902039, Dec 10 '18 at 19:59
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, Dec 10 '18 at 20:07
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, Dec 10 '18 at 20:30
OK, so now check the browser console. See if the fonts are attempting to load, and look for any errors. — ceejayoz, Dec 10 '18 at 20:30
The browser console doesn't have any font errors, yet the images do not load — ekjcfn3902039, Dec 10 '18 at 20:35
Are you ``ing `node_modules/material-design-icons/iconfont/material-icons.css` anywhere in your HTML at all? — ceejayoz, Dec 10 '18 at 20:46
Yes, the href is set to the node_modules...css file. So, I removed the 2 googleapis.com links shown above with one that points to the local css file. — ekjcfn3902039, Dec 10 '18 at 20:56
Do you see a call to that URL in the Network tab of your browser's developer console? Does it complete successfully? Can you deploy this somewhere we can take a look? — ceejayoz, Dec 10 '18 at 20:57
Will the application be online at least initially? If so, you may want to just use a ServicevWorker to cache the fonts. — Jackson Miller, Dec 11 '18 at 04:48

score 10 · Accepted Answer · answered Apr 24 '19 at 11:24

10

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

answered Apr 24 '19 at 11:24

JTInfinite

360
4
14

2

H, I resolved this similarly a while ago. Sorry I didn't update the thread. However, this code is essentially what I did to get it working. – ekjcfn3902039 Apr 24 '19 at 14:32
No problem. It's good for others to see if someone else needs the help – JTInfinite Apr 25 '19 at 11:47

score 5 · Answer 2 · answered Dec 11 '18 at 16:30

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">

score 0 · Answer 3 · answered Dec 21 '21 at 20:47

my friends, https://vuetifyjs.com/en/features/icon-fonts/#material-design-icons

first install mdi with npm install @mdi/font -D or yarn add @mdi/font -D
import in vuetify file import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
and set in config export default new Vuetify({ icons: { iconfont: 'mdi', // default - only for display purposes }, })

Vuetify / Offline icons

3 Answers3