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?

Answer 1

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'

Answer 2

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