vuejs2vuetify.jsmaterial-design-icons

Vuetify icons not showing correctly: they appear as as "$vuetify.icons..."

I'm facing an issue with the icons in Vuetify not showing properly, for example below is the Vuetify expansion panel. I already tried the solutions in this question vuetify icon not showing, but they didn't work for me. You can see below that the chevron-down icon is showing as $vuetify.icons.expand. I've tried both importing @mdi/font which doesn't do anything for me... here's the code I'm using:

import Vue from 'vue'
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
// import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify, {
    icons: {
        iconfont: 'mdi'
    }
});

//expansion panels

enter image description here

Importing material-design-icons-iconfont/dist/material-design-icons.css, changes the icons into some weird icons.

enter image description here

Please let me know what could be the problem and what else I can try!

Solution

  • Assuming you're using Vuetify 2...

    I think the key thing you're missing is passing Vuetify to the Vue constructor, as described here:

    https://vuetifyjs.com/en/getting-started/quick-start#bootstrapping-the-vuetify-object

    Like this:

    new Vue({
  vuetify: new Vuetify(),
  // ... all the other stuff you're currently passing

    If you want to configure the font then you need to pass it to the Vuetify constructor, not Vue.use. e.g.

    const vuetify = new Vuetify({
  icons: {
    iconfont: 'mdi'
  }
})

new Vue({
  vuetify,
  // ... all the other stuff you're currently passing

    mdi is the default icon set anyway, so you don't need to do this if you want to use that font.

    The way you're importing the CSS appears to be correct. You should be seeing errors if you haven't done that right.

    The current documentation is here: https://vuetifyjs.com/en/customization/icons. At the time of writing that's for version 2.1.0. Be very careful not to confuse the configuration required for Vuetify 2 with 1.5, they are significantly different despite some similarities. You also need to be clear that there are two fonts with very similar names, one configured using iconfont: 'mdi' and one with iconfont: 'md'. Both use the words 'Material', 'Design' and 'Icons' in their names depending on the context.

    EDIT by OP

    I can't put this in a comment, so I figured I'd edit the answer. This is what ended up working for me:

    // src/plugins/vuetify.ts

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify);

const vuetify = new Vuetify({
    icons: {
        iconfont: 'mdi'
    }
});

export default vuetify

    Then in my other file where I use Vue:

    // other_file.ts

import vuetify from './plugins/vuetify';

new Vue({
    vuetify,
    // ...other stuff...
})