Vuejs-Mdi vue: mdi-vue - Material Design Icon components for Vuejs

Material Design Icons for Vue.js

This library should grant an easy-to-use interface to icons from MDI.
Import only those icons you need, does not require further configuration. Install it and use it without bloating your source code.

Enjoy!

How to use

Simply install it using your favourite package manager

eg:

$ npm install --save mdi-vue
$ yarn add mdi-vue

Import and usage

Simply import the icon you wish to use to your vue project with the CommonJS syntax like in the following examples:

require('mdi-vue/Hotel.vue');

import 'mdi-vue/CommentAlert.vue';

Example.vue:

<template>
  <div>
    My hand is a <HookIcon />
  </div>
</template>

<script>
import HookIcon from 'mdi-vue/Hook.vue' // raw vue component
// import HookIcon from 'mdi-vue/Hook[.js]' // transpiled component

export {
  components: [
    HookIcon,
  ]
}
</script>

Props

width and height (numeric or string; default: 24)

  <Icon :width="30" :height="30 />

size (numeric or string; default: 24)

Sets the width and the height of the of an icon, given that no with or height was provided to the icon itself

  <Icon size="64" />
  <Icon :size="512" />

Since the size property serves as a fallback to both width and height properties the above examples are equal to the following ones

  <Icon width="64" height="64" />
  <Icon :width="512" :height="512" />

spin (boolean; default: false)

Applies a css spin/rotate animation to the icon

  <CogIcon spin />
  // or
  <CogIcon :spin="true" />

Global imports

Just as any component, icons can be registered globally using Vue.component as in the following example.

Example

const Vue = require('vue')
const HumanIcon = require('mdi-vue/Human.vue')

Vue.component('human-icon', HumanIcon)

new Vue({
  el: '#some-html-element',
  template: '<human-icon />'
})

Heavily inspired by mdi-react.

Used resources

Comments

  • Vue 3: Class binding is not working
    Vue 3: Class binding is not working

    May 18, 2021

    Since version ^3.0.6 class binding is not working.

    No problem for version 3.0.5.

    Reply
  • setting color
    setting color

    Jul 2, 2021

    I don't see any clear way to define things like colors or add styles to this? Is there a way to add a class prop to be able to further define how it looks?

    Reply
  • builld is too big
    builld is too big

    Aug 30, 2021

    when project is built in nuxt, the mdijs bundle is big its about 1.+MBs .. how do i reduce it

    Reply
  • Default rendering of icons is too tall
    Default rendering of icons is too tall

    Jan 21, 2020

    Say we have the following <template>:

    <template>
      <button>
        <FileUploadOutline width="20" height="20"/>
        <span>Import Transactions</span>
      </button>
    </template>
    

    The icon renders roughly the following markup:

    <span role="img" class="mdi">
      <svg>
        …
      </svg>
    </span>
    

    Unfortunately, the icon doesn't end up being 20×20 in size. It ends up slightly larger in height. The <svg> element has the correct dimensions, but the containing <span> ends up being a little taller at 23px.

    image

    It seems this is due to the <svg> defaulting to display: inline and vertical-align: baseline. This means when rendered in an inline layout context, the bottom edge of the <svg> is lifted up until it aligns with the baseline of the line of text that it is on. In my opinion, this is almost never what you want for icons.

    I found two simple fixes that make this artifact go away:

    .mdi {
      display: flex;
    }
    

    or:

    .mdi > svg {
      vertical-align: middle;
    }
    

    It seems reasonable that these icons should:

    1. default to rendering as a perfect square, and
    2. always render at the exact dimension passed in via the width and height props.

    The CSS above seems to fix this, and it would be great if the icons had this styling by default so users wouldn't have to apply it themselves.

    Thoughts?

    Reply
  • Documentation on the component name would be very much appreciated
    Documentation on the component name would be very much appreciated

    Jul 11, 2017

    It took me a little while to realise that icons with multiple names, like "checkbox-blank-circle-outline", are expected to be input as mdi-checkboxblankcircleoutline-icon. As far as I can see, this isn't really documented anywhere (sorry if I missed it!)

    It'd be great to see this documented, to save others time as well.

    Reply
  • Make sizing the icons work
    Make sizing the icons work

    Aug 29, 2019

    It would be very useful to have sizing props that actually worked. In the code, there is width, height, and viewBox.

    export default {
      name: 'mdi-${name}',
      props: {
        width: {
          type: [Number, String],
          default: 24
        },
        height: {
          type: [Number, String],
          default: 24
        },
        viewBox: {
          type: [String],
          default: '0 0 24 24'
        },
        xmlns: {
          type: String,
          default: 'xmlns="http://www.w3.org/2000/svg"'
        }
      }
    }
    

    however, setting these does now work as expected...

    <map-marker
      class="text-blue-grey"
      :width="19"
      :height="19"
      :view-box="`0 0 19 19`"
    ></map-marker> {{ mover.city }}, {{ mover.state }}
    

    Instead of changing the size, it just cuts off the icon.

    When I inspect the code, and change the view-box to viewBox, the icon then changes to the width and height that I want it to be. Something is wrong with the props.

    Reply
  • Add possibility to use object for property
    Add possibility to use object for property "class"

    Mar 20, 2021

    It would be nice if the following is working:

    <mdicon
     v-if="isOpen"
     name="ArrowCollapseVertical"
     :class="{ 'text-blue': isOpen, 'text-red': !isOpen }"
    />
    

    but it is just simply ignored.

    Currently i depend on following workaround:

    <mdicon
      v-if="isOpen"
      name="ArrowCollapseVertical"
      class="text-blue"
    />
    <mdicon
      v-else
      name="ArrowCollapseVertical"
      class="text-red"
    />
    Reply
  • [Vite] 'require is not defined' after build
    [Vite] 'require is not defined' after build

    Apr 13, 2021

    Not sure if this is an issue with my vite.config.js

    I did try to get Vite to transpile the package to an ES Module with no luck:

    optimizeDeps: {
        include: ['mdi-vue']
    }
    

    Output of the production build:

    import { mdiAlert } from '@mdi/js'
    import './icons.css'
    
    const { h: v3h } = require('vue') // import vue3's render function
    

    Uncaught ReferenceError: require is not defined at main.js:4

    Reply
  • Won't work with runtime only build of vue
    Won't work with runtime only build of vue

    Jan 17, 2018

    Since icons are .js and not .vue files

    Reply