CODEWITHSUNDEEP
vue.jsiconsvuetify.js
eunhee ju
eunhee ju

Reputation: 765

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.

enter image description here

Upvotes: 75

Views: 114806

Answers (16)

julif
julif

Reputation: 45

For the users of Vuetify 3:

Install:

npm install @fortawesome/fontawesome-free -D

npm install @mdi/font

main.ts:

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/

Upvotes: 3

Or Yaacov
Or Yaacov

Reputation: 3880

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

Upvotes: 0

hamid choopani
hamid choopani

Reputation: 164

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

Upvotes: 4

mostafa kazemi
mostafa kazemi

Reputation: 565

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

Upvotes: 2

Raj
Raj

Reputation: 11

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'

Upvotes: 0

shakhboz pulatov
shakhboz pulatov

Reputation: 97

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

Upvotes: 8

Ivan Pirus
Ivan Pirus

Reputation: 1076

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

Upvotes: 3

Cookiejest
Cookiejest

Reputation: 723

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

Upvotes: 45

Ann Kilzer
Ann Kilzer

Reputation: 1361

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

Upvotes: 0

BenB
BenB

Reputation: 2907

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'

Upvotes: 97

faramund
faramund

Reputation: 59

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

Upvotes: 1

Omar Makled
Omar Makled

Reputation: 1866

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

Upvotes: 1

v.s.
v.s.

Reputation: 121

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

Upvotes: 7

S Verma
S Verma

Reputation: 113

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

Upvotes: 3

Hasnat Safder
Hasnat Safder

Reputation: 2485

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'

Upvotes: 184

Andath
Andath

Reputation: 22714

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

Upvotes: 7

Related Questions