The issue is pretty much the same as the title. I am on Vuetify's 1.5.24 version and I am currently trying to create a button with an icon inside it as per mentioned in the vuetify documentation.

<v-btn icon color="dark"><v-icon>filter-variant</v-icon></v-btn>

But what I end up with is an invisible button that has nothing displayed inside it. I am using the same code provided in the documentation but nothing worked.

I have already tried redoing my installation of mdi. Currently, my local environment of the front end is running in intellij in case the issue can be linked to that.

CodePudding user response：

Have you tried to add:

mdi

the following code should work if you are using vuetify, also you can look at their documentation here

<v-btn icon color="dark" > 
    <v-icon>mdi-filter-variant</v-icon>
</v-btn>

CodePudding user response：

Well, the step-to-step procedure is already mentioned in Vuetify 1.5.x documentation, however, here are some quick steps you can follow to set up the icons-

Straightforward way

1. Install material design icons-

$ yarn add @mdi/font -D
// OR
$ npm install @mdi/font -D

2. Then import the library where you initialize the Vuetify.

// Ensure you are using css-loader
import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

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

After following the above steps, you can use the icons in your template like this.

<v-btn icon><v-icon>mdi-filter-variant</v-icon></v-btn>

Recommended way

While working on a project, it's best practice to move icons in a separate file for re-usability purposes. Here is how you can do this-

1. Create a file icons.js under your src folder and put icons inside it in an Object key-value format like this-

icons.js

export const custom_icons = {
  "filter_variant": "mdi-filter-variant",
  "filter_remove": "mdi-filter-remove",
  ...
  ...
  // other icons in same format
}

2. Import the custom icons in the file where you initialize the Vuetify-

// Ensure you are using css-loader
import '@mdi/font/css/materialdesignicons.css' 
import Vue from 'vue'
import Vuetify from 'vuetify'
import { custom_icons } from "@/icons.js"


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

After following the above 2 steps, you can use icons in your template like this-

<v-btn icon><v-icon>$vuetify.icons.filter_variant</v-icon></v-btn>