vuetify icon not showing

Question

I am using vue.js and vuetify. I want to add an icon but it is not working as expected (not rendered).

How can I fix this?

Please refer to the following code:

main.js

import Vue from 'vue' import Vuetify from "vuetify"; import "vuetify/dist/vuetify.min.css";  Vue.use(Vuetify); 

index.html

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet"> 

calendar.vue

<i class="material-icons"> keyboard_arrow_down </i> 

I want it to look like an icon, not code.

Answer 1

With Vue CLI 3 we have no index.html in the src folder so alternatively you can

npm install --save material-design-icons-iconfont 

and import it in the main.js file

import 'material-design-icons-iconfont/dist/material-design-icons.css' 

Answer 2

Had this issue with Vuetify 2.1.3 installed via the vuetify-loader 1.2.2

Seems like previous solutions do not work becues the default icons library has changed to mdi-font.

Solution was:

yarn add @mdi/font 

And in the file main.js (or plugins/vueitfy.js if exists) add this line below the imports

import '@mdi/font/css/materialdesignicons.css'