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.

>

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'

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'

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",

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

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"]

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 )))

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

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);

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

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

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

$ 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 }, })

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'