vue.jsmaterial-design-icons

Using Material Design icons with Vue


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:


Solution

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