Icon don't show up with vuetify/mdi

Question

I want to use an Icon library and because it could be advantageous for other things, I decided to just use Vuetify, as it includes other design advantages than just the ability to include Icons.

After installing @mdi/js and Vuetify with npm in my existing project, I have the following code in my src/plugins/vuetify.ts folder:

import "vuetify/styles";

import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi"

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

Now to insert icons, it is recommended to use @mdi/js because as I understand it only the actual used Icons will be imported.

This is how my App.vue looks like:

<script setup lang="ts">
import { mdiAccount } from '@mdi/js';
</script>

<template>
    <main>
        <v-icon :icon="mdiAccount" size="16" color="white" class="h-25 w-25"/>
    </main>
</template>

So pretty much the example given in the Documentation, just with the composition api (unless I made a mistake)... Can you spot the mistake I made?

I recommend that one: https://stackoverflow.com/a/72055404/8816585 — kissu, Dec 27 '22 at 20:52
@kissu Ok I tried that and got it set up within 10 minutes, after playing with vuetify for 2 hours lol. So Thanks! Still have one problem I can't seem to fix though: The line 'import IconAccountBox from '~icons/mdi/account-box'' shows in VSCode, that types couldn't be fond. How could I fix that? I can.t find a ~icons folder in my node-compontens, how does my compiler know what ~icons means? — MySurmise, Dec 27 '22 at 21:10
Do you use TS? If not, you can skip that part and not worry about types. — kissu, Dec 27 '22 at 21:32

score 2 · Answer 1 · answered May 16 '23 at 03:45

2

I had that same problem, after looking examples i found was it was mising a import of styles. In the main.ts (or in the file where the app is build) file you should import this styles

import '@mdi/font/css/materialdesignicons.css'

answered May 16 '23 at 03:45

Juan Carlos Hernandez Breton

21
4

score 0 · Accepted Answer · answered Dec 27 '22 at 21:43

You can use the answer here to get some universal icons: https://stackoverflow.com/a/72055404/8816585

If you also care about the types, you can use the following in tsconfig.json

"compilerOptions": {
  "types": [
    "unplugin-icons/types/vue",
  ]
}

Icon don't show up with vuetify/mdi

2 Answers2