Vuetify icons don't render at all

Question

According to that answer, the following code should render an icon with Vuetify:

<v-icon>
  arrow_downward
</v-icon>

It doesn't, instead I see "alarm_on" in plain text in the middle of a blue rectangle. No error in console, using Vuetify 2.0.0 and Vue 2.6.10. Below is how I add Vuetify to my project:

// Vue import Vue from 'vue';

// Vuetify
import '@mdi/font/css/materialdesignicons.css';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi'
  },
});

Any idea why icons don't work?

How does your vuetify config look like? Especially the iconfont option (https://vuetifyjs.com/en/customization/icons) — Sebastian Speitel, Sep 17 '19 at 16:35
are you import this module `import '@mdi/font/css/materialdesignicons.css'` in app.js ? — Boussadjra Brahim, Sep 17 '19 at 16:35
Do you have this ? import 'vuetify/src/stylus/app.styl' Vue.use(Vuetify, { iconfont: 'md' }) — JeffProd, Sep 17 '19 at 17:39
I added my config in the question. Yes I do import `materialdesignicons.css`. @JeffProd : `import 'vuetify/src/stylus/app.styl' Vue.use(Vuetify, { iconfont: 'md' })` isn't required in default icons installation. — drake035, Sep 18 '19 at 13:21

Mohsin Amjad · Accepted Answer · 2019-09-18T14:34:57.663

1

use mdi prefix like that

<v-icon>
  mdi-arrow-down
</v-icon>

these are valid icons for mdi https://materialdesignicons.com/

edited Sep 18 '19 at 14:34

answered Sep 18 '19 at 14:04

Mohsin Amjad

1,045
6
14

Vuetify icons don't render at all

1 Answers1