<v-icon> vuetify material Icon (mdi) showing problem in vuetify and nuxt app?

Question

I am using nuxt and vuetify. all of the tags working fine. But when I am using <v-icon>, the icon is not showing ..

<v-flex xs12 mb-3>
  <v-btn outline fab small color="blue-grey lighten-4">
      <v-icon color="grey darken-4">mdi-facebook</v-icon>
  </v-btn>

  <v-btn outline fab small color="blue-grey lighten-4">
      <v-icon color="grey darken-4">mdi-google-plus</v-icon>
  </v-btn>

  <v-btn outline fab small color="blue-grey lighten-4">
     <v-icon color="grey darken-4">mdi-linkedin</v-icon>
  </v-btn>
</v-flex>

Answer 1

Here is what worked for me:

Start by adding the following to the vuetify: {} object in nuxt.config.js:

defaultAssets: {
  font: true,
  icons: 'md'
},
icons: {
  iconfont: 'md',
}

Then refer to your icons without the 'mdi-' prefix as follows:

<v-icon>feedback</v-icon>

Please note that I only have 2 hours of Nuxt.js experience so there is likely a better way, but I hope this helps people get started :)

---

Edit: I figured out that there are two different icon libraries that Vuetify can come with (depending on which instructions you follow for installation). One is md which you use without prefixing your icons and the other is mdi which you use with the "mdi-" prefix.

Answer 2

The unofficial google's repository definitely works, can't testify for others. Try the CDN link first

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

Alternatively, install locally using yarn or NPM

$ yarn add material-design-icons-iconfont -D

// OR

$ npm install material-design-icons-iconfont -D

Then import in your vuetify.js file

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
export default new Vuetify({
  icons: {
    iconfont: 'md',
  },
})

Thats all