vuetify icon not showing

Question

I am using vue.js and vuetify. I want to add an icon but not working. (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

If you are using Vuetify, then you should simply use the <v-icon> component which supports both Material and Font Awesome icons: documentation

Example:

<v-icon>arrow_downward</v-icon>

By using Vuetify, you basically won't need to use the class="icon_name" syntax anymore.

EDIT: icon references - Material Design & Font Awesome

Answer 2

With Vue CLI 3 we has 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 3

You can face the exact same issue if you use Nuxt.js. To solve this issue, you have to declare the Material Design icons in your CSS ... through the CDN, for example, as below:

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    {
      rel: 'stylesheet',
      href:
          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
    }
]

Answer 4

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 plugins/vueitfy.js add this line below the imports

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