I want to use the MaterialDesignIcons (https://materialdesignicons.com/) with my vue project. What is the proper way of using these icons with my project? I tried the following but got errors....
yarn add @mdi/font
then in my vue file
<template>
...
<mdiLock />
...
</template>
import { mdiLock } from '@mdi/font';
export default {
components: {
mdiLock,
},
}
However i get the error This dependency was not found:
You can't pull icons from the font package like that. You probably want to be using @mdi/js.
We provide a Vue icon component to make this easy.
Here is a single file component example:
<template>
<svg-icon type="mdi" :path="path"></svg-icon>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiAccount } from '@mdi/js'
export default {
name: "my-cool-component",
components: {
SvgIcon
},
data() {
return {
path: mdiAccount,
}
}
}
</script>