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