vue.js - 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'