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

Solution 1:^[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'

Solution 2:^[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'

Solution 3:^[3]

Worked for me:

npm install @mdi/font

and then putting this inside plugins/vuetify.js:

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

Using "vuetify": "^2.3.19", "vue": "^2.6.12",

Solution 4:^[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'
    }
]

Solution 5:^[5]

If you are using Nuxt with Vuetify and Material Icons don't show up in Firefox:

npm install import @mdi/font

Then in your nuxt.config.js add the following entry to your css field:

css: ["@mdi/font/css/materialdesignicons.css"]

Solution 6:^[6]

npm install @mdi/font

write in main.js(or plugins/vuetify.js)

import "@mdi/font/css/materialdesignicons.css";

I got this answer from here too and it work succesfully )))

Solution 7:^[7]

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

<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

Reference

Solution 8:^[8]

Also check your vuetify config file plugins/vuetify.js

Additional mast be setting iconfont: 'mdi' . In same cases default is iconfont:'fas'

I spent many hours to find it)

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

const opts = {
  theme: {
    themes: {
      light: {
        //
      },
    },
  },
  icons: {
    iconfont: 'mdi',
  },
};

export default new Vuetify(opts);

Solution 9:^[9]

You can import all necessary styles

app.scss

@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900";
@import "https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css";
@import "https://fonts.googleapis.com/css?family=Material+Icons";
@import '~vuetify/dist/vuetify.css';

Solution 10:^[10]

A solution from @Hasnat Safder works for me, but an order in main.js is important:

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import vuetify from './plugins/vuetify';

Solution 11:^[11]

The yarn way (similar to Hasnat's response):

yarn add material-design-icons-iconfont

and import in the vuetify.js file (or main.js if it doesn't exist) like so:

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

Solution 12:^[12]

$ yarn add @mdi/font -D

// OR $ npm install @mdi/font -D

// src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader import Vue from 'vue' import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({ icons: { iconfont: 'mdi', // default - only for display purposes }, })

Solution 13:^[13]

before my code

it's wrok for me :) just install this package

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

and import it in the main.js or vuetify.js file

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Cookiejest
Solution 4	Billal Begueradj
Solution 5	v.s.
Solution 6	shakhboz pulatov
Solution 7	S Verma
Solution 8	Ivan Pirus
Solution 9	Omar Makled
Solution 10	faramund
Solution 11	Ann Kilzer
Solution 12	mostafa kazemi
Solution 13	Tonio

'vuetify icon not showing

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]