Using Material Design icons with Vue

Question

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:

Answer 1

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>