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:

There are a bunch of projects on npm that make this easy, for example, https://github.com/therufa/mdi-vue — Brandon Bertelsen, Jan 08 '22 at 19:30
try import { mdiLock } from '/node_modules/@mdi/font'. Maybe the @ sign in the package name is the problem. — Ferry Kranenburg, Jan 08 '22 at 21:01

score 5 · Accepted Answer · answered Jan 09 '22 at 12:26

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>

Using Material Design icons with Vue

1 Answers1