vue.jsiconsvuetify.js

vuetify icon not showing

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.

enter image description here

Solution

  • 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'