Icon not showing in a button - html

Question

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.

Answer 1

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>

Answer 2

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>

Answer 3

This could be resolved by using mdi stylesheet as Material Design Icons aims to cover the gaps Google left with their set in Material icons library and allow a lot more community integration.
Live Demo :
Vue.use(Vuetify);
var vm = new Vue({
el: "#app"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.1.96/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.css"/>
<div id="app">
<v-btn icon color="indigo">
<v-icon>star</v-icon>
</v-btn>
<v-btn icon color="dark">
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
</div>