Reputation: 5048
Following the documentation here:
https://next.vuetifyjs.com/en/customization/icons
I setup my project exactly as described.
Expected:
seeing an <svg>
tag.
Actual:
I see an <i>
tag (which causes issues with some settings on IE)
Here is a link to a reproduction:
https://codesandbox.io/embed/dialog-vuetify-bhs76
Upvotes: 5
Views: 1910
Reputation: 463
This is the way I've been doing it. If you want, you can also set custom names for icons - which is very useful if you decide to change which icons you use:
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import {
mdiDelete
} from '@mdi/js';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdiSvg',
values: {
mdiDelete,
// or give it a custom name:
delete: mdiDelete,
}
},
});
Then in your v-icon component:
<v-icon>$mdiDelete</v-icon>
<v-icon>$delete</v-icon>
Upvotes: 3
Reputation: 173
you should install the right icon library from the vuetify site
then import it on the vuetify plugin folder
export default new Vuetify({
icons: {
iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
},
})
least and last you should use the icon on the component
<template>
<div>
<v-icon>{{mdiMenu}}</v-icon>
</div>
</template>
<script>
import { mdiMenu } from '@mdi/js';
export default {
data() {
return {
mdiMenu
};
}
};
</script>
you can find icons on this material design site
Upvotes: 1