69

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.

enter image description here

3
  • 3
    You've accepted the wrong answer. Are you able to change your selection to better help others in finding the right result? stackoverflow.com/a/57535771/5735265 should be the accepted result. Jul 24, 2020 at 2:32
  • I changed my selection, thank you all for answering my question! :)
    – eunhee ju
    Aug 30, 2021 at 4: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 the-koi.com/projects/… under the section Resolve Vuetify Icons not shown you can see a complete example on how to do it.
    – alexcodes
    Dec 8, 2022 at 12:10

16 Answers 16

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'
3
  • this solution works for me. Another solution using fontawesome, follow the steps from official docs here Jan 24, 2020 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, 2020 at 23:58
  • Be sure to use e.g. mdi-airplane and not airplane for material-design icons as pointed out in this answer and the docs in the very first paragraph. Feb 17, 2021 at 20:58
84

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'
6
  • 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, 2019 at 16:13
  • @Orochi they is defiantly something weird going on, I wish they will fix it
    – BenB
    Oct 17, 2019 at 16:37
  • 7
    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 1, 2020 at 8: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, 2020 at 15:42
  • Works with Vuetify 3.0.4 via npm @mdi/font and import '@mdi/font/css/materialdesignicons.css'
    – Tenarius
    Dec 11, 2022 at 12:17
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",

2
  • Also worked for vuetify 3.0.1
    – visoft
    Nov 16, 2022 at 7:42
  • Also worked for vuetify 3.0.4
    – Tenarius
    Dec 11, 2022 at 12:18
7

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

1
  • 2
    Repetitive. Answer already present. Dec 1, 2021 at 6:57
2

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

0
2

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

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
  },
})
1
  • Why as a dev dependency though?
    – Yash Nag
    Jan 31 at 10:12
2

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

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

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/

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.