vuetify icon not showing

Question

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.

You've accepted the wrong answer. Are you able to change your selection to better help others in finding the right result? https://stackoverflow.com/a/57535771/5735265 should be the accepted result. — Asa Stallard, Jul 24 '20 at 02:32
I changed my selection, thank you all for answering my question! :) — eunhee ju, Aug 30 '21 at 04:13
You'll need to install the wished icon pack, import the pack itself and its css and give your vuetify config a reference to it. In this article https://www.the-koi.com/projects/how-to-set-up-a-project-with-nuxt3-and-vuetify3-with-a-quick-overview/ under the section Resolve Vuetify Icons not shown you can see a complete example on how to do it. — alexcodes, Dec 08 '22 at 12:10

Hasnat Safder · Accepted Answer · 2019-12-09T07:41:35.267

181

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'

edited Dec 09 '19 at 07:41

answered Aug 17 '19 at 11:15

Hasnat Safder

2,455
1
17
15

this solution works for me. Another solution using fontawesome, follow the steps from official docs [here](https://v15.vuetifyjs.com/en/framework/icons#install-font-awesome-5-icons) – Andang Rian Dimas Jan 24 '20 at 16:59
1

it works thanks, also with this alternative, we don't need to append a `mdi-` as a prefix – kakashy Jul 18 '20 at 23:58
Be sure to use e.g. `mdi-airplane` and not `airplane` for material-design icons as pointed out in [this answer](https://stackoverflow.com/a/63411099/3469861) and [the docs](https://vuetifyjs.com/en/components/icons/) in the very first paragraph. – JackLeEmmerdeur Feb 17 '21 at 20:58

BenB · Answer 2 · 2020-05-15T00:56:33.050

83

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'

edited May 15 '20 at 00:56

answered Oct 13 '19 at 01:49

BenB

2,747
3
29
54

2

This is also stated in the official documentation - however issue is still there. The only way I get those icons to work is with the solution @hasnat Safder provided. – MaTTo Oct 17 '19 at 16:13
@Orochi they is defiantly something weird going on, I wish they will fix it – BenB Oct 17 '19 at 16:37
6

This is the solution that worked for me, not from Hasnat Safder. Except, I imported in main.js cuz I can't find vuetify.js – Jules Lee Feb 01 '20 at 08:26
1

For me icons was shown in development (npm run serve) mode but NOT in production (npm run build). Installing fonts with 'npm install --save @mdi/font" and importing into vuetify.js saved my day. – Kim Nyholm May 10 '20 at 15:42
Works with Vuetify 3.0.4 via npm @mdi/font and import '@mdi/font/css/materialdesignicons.css' – Tenarius Dec 11 '22 at 12:17
This was the solution for me using Vite/vue3 – keyboard-warrior Jan 30 '23 at 17:13

score 38 · Answer 3 · answered Nov 25 '20 at 20:19

38

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

answered Nov 25 '20 at 20:19

Cookiejest

653
6
17

Also worked for vuetify 3.0.1 – visoft Nov 16 '22 at 07:42
Also worked for vuetify 3.0.4 – Tenarius Dec 11 '22 at 12:18

score 7 · Answer 4 · answered Aug 27 '19 at 11:13

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

score 6 · Answer 5 · answered Apr 05 '20 at 08:57

6

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

answered Apr 05 '20 at 08:57

v.s.

101
1
4

score 4 · Answer 6 · answered Dec 01 '21 at 05:29

4

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

answered Dec 01 '21 at 05:29

shakhboz pulatov

57
1
2

2

Repetitive. Answer already present. – Sonia Samipillai Dec 01 '21 at 06:57

score 2 · Answer 7 · answered Jan 28 '20 at 16:59

2

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

answered Jan 28 '20 at 16:59

S Verma

103
2
9

score 2 · Answer 8 · edited Oct 05 '22 at 16:11

2

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

edited Oct 05 '22 at 16:11

air-dex

4,130
2
25
25

answered Aug 01 '21 at 09:03

mostafa kazemi

514
6
7

Why as a dev dependency though? – Yash Nag Jan 31 '23 at 10:12

score 2 · Answer 9 · answered Sep 02 '21 at 20:22

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

score 2 · Answer 10 · answered Nov 23 '22 at 16:54

This is how it worked for me

install

yarn add @mdi/font -D

// OR

npm install @mdi/font -D

Then add these to main.js or vuetify.js

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import { createVuetify } from 'vuetify'

export default createVuetify({
  icons: {
    defaultSet: 'mdi', // This is already the default value - only for display purposes
  },
})

score 1 · Answer 11 · answered Apr 26 '20 at 21:54

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

score 1 · Answer 12 · answered May 09 '20 at 21:22

1

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

answered May 09 '20 at 21:22

faramund

49
4

score 1 · Answer 13 · answered Mar 03 '23 at 14:25

For the users of Vuetify 3:

Install:

npm install @fortawesome/fontawesome-free -D

npm install @mdi/font

main.ts:

enter code here


import "vuetify/styles";
import { createVuetify, type ThemeDefinition } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

import { fa } from "vuetify/iconsets/fa";
import { aliases, mdi } from "vuetify/lib/iconsets/mdi";
// make sure to also import the coresponding css
import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using css-loader
import "@fortawesome/fontawesome-free/css/all.css"; // Ensure your project is capable of handling css files

const vuetify = createVuetify({
  theme: {
    defaultTheme: "dark",
  },
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
      fa,
    },
  },
  components,
  directives,
});

app.use(vuetify);

Credit: https://www.the-koi.com/projects/setting-up-vue-3-with-vuetify-icons-and-themes/

score 0 · Answer 14 · answered May 22 '20 at 05:56

0

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

answered May 22 '20 at 05:56

Ann Kilzer

1,266
3
16
39

score 0 · Answer 15 · edited May 02 '22 at 03:31

0

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'

edited May 02 '22 at 03:31

Tonio

743
1
4
18

answered Apr 29 '22 at 05:28

Raj

1
1

score 0 · Answer 16 · answered Apr 19 '23 at 15:34

After straggling with this, solved the issue by following vutify guide: https://vuetifyjs.com/en/features/icon-fonts/

import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    }
  },
})

and

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

vuetify icon not showing

16 Answers16

Linked