vuetify icon not showing

问题:

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

回答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

回答2:

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'

回答3:

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'

回答4:

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'
    }
]

回答5:

Read the latest released docs and include below code in your index.html

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

Reference