Vue MDI

VueJS Component for Material Design Icons

Installation

Install the icon content @mdi/js package and this module

npm install --save @mdi/js
npm install --save vue-mdi

And import VueMdi css file in your app entry point

import 'vue-mdi/dist/mdi.css';

Add more icons packs

You can also include a set of Material Design Icons Light

npm install --save @mdi/light-js

Usage

Recommended

The following examples are based on a project configured with vue-cli.

src/main.js

import Vue from 'vue'
import App from './App'
import { VueMdi, library } from 'vue-mdi'
import { mdiAccount } from '@mdi/js'
import 'vue-mdi/dist/mdi.css';

library.add({ mdiAccount })

Vue.component('vue-mdi', VueMdi)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

src/App.vue

<template>
  <div id="app">
    <vue-mdi icon="account" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Using default icons

import { library } from 'vue-mdi'
import { mdiAccount } from '@mdi/js'

library.add({ mdiAccount })

<!-- The default MDI icons is implicit -->
<vue-mdi icon="account" />

<!-- It's better to be explicit -->
<vue-mdi :icon="['mdi', 'account']" />

Using Light icons

import { library } from 'vue-mdi'
import { mdilAccount } from '@mdi/light-js'

library.add({ mdilAccount })

<vue-mdi :icon="['mdil', 'account']" />

The icon property

The icon property of the VueMdi component can be used in the following way:

Shorthand that assumes a prefix of mdi

<vue-mdi icon="android" />
<vue-mdi icon="facebook" />

<vue-mdi :icon="['mdi', 'android']" /> # Same as above
<vue-mdi :icon="['mdi', 'facebook']" /> # Same as above

For the above to work you must add the android and facebook icon to the library.

import { library } from 'vue-mdi'
import { mdiAndroid, mdiFacebook } from '@mdi/js'

library.add({ mdiAndroid, mdiFacebook })

In the event that you are using an icon with a multi-word name please note that you would need to pass in the icon name using kebab-case as opposed to camelCase.

<vue-mdi icon="android" />  # import { mdiAndroid } from '@mdi/js'

Explicit prefix

<vue-mdi :icon="['mdi', 'facebook']" />

For the above to work you must add the facebook icon (MDI default pack) to the library.

import { library } from 'vue-mdi'
import { mdiFacebook } from '@mdi/js'

library.add({ mdiFacebook })

Icon property declared by the object

<template>
  <div id="app">
    <vue-mdi :icon="icon" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      icon: {
        prefix: 'mdil',
        name: 'account'
      }
    }
  }
}
</script>

For the above to work you must add the MDI Light account icon to the library.

import { library } from 'vue-mdi'
import { mdilAccount } from '@mdi/light-js'

library.add({ mdilAccount })

Using the concept of a library

Explicitly selecting icons offer the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset MDI's thousands of icons to just the small number that are normally used.

Import the specific icons that you need

import { library } from 'vue-mdi'
import { mdiAccount, mdiBlockHelper } from '@mdi/js'
import { mdilAccount } from '@mdi/light-js'

library.add({ mdiAccount, mdiBlockHelper, mdilAccount })

Reset all loaded icons

import { library } from 'vue-mdi'

library.reset()

VueMdi component props

Prop	PropTypes	Default	Details
icon	object, array, string	required	MDI icon property (see above). Make sure that you added this icon from @mdi/js or @mdi/light-js to the library
title	string, null	null	A11y <title>{title}</title>
description	string, null	null	A11y <desc>{desc}</desc>
size	number, string, null	null	Icon size. Will be converted to {size * 1.5}rem. If a string is specified, it can only take the following values: mdi-18px, mdi-24px, mdi-36px, mdi-48px.
color	string	#000	Icon color. Can accept any CSS color value
horizontal	bool	false	Flip Horizontal
vertical	bool	false	Flip Vertical
rotate	number	0	Degrees 0 to 360
spin	bool, number	false	Adding animation for icon spin. If a number is set, it is equal to the number of seconds for a full rotation of the icon. If set to true, the number of seconds is 2. Counterclockwise

Note: Additional props will be applied to the <svg> element.

Development

To develop clone the repo and run npm install.

Tasks

Command	Purpose
build	Build a development version of the library using Rollup
dist	Build a production version of the library using Rollup
test	Execute unit tests
lint	Run ESlint for lint project files

Related Packages

NPM @MDI Organization

• JavaScript/Typescript: MaterialDesign-JS
• React: MaterialDesign-React
• Webfont: MaterialDesign-Webfont