Material Design Icons for Vue.js
npm install mdi-vue!npm

MDIVue came into life with the aim to provide an easy-to-use icon library for Vue
with the use of Templarian's Material Desing Icons project.
Since v2.x the library does not consist of generated components, but a wrapper specificly for the @mdi/js
library and therefore comes in form of a plugin.
Starting from version 2.1.2 the lib does not contain icon imports, these need to be provided upon
registration of the plugin. This allows to obtain control over the build size of your project,
since the list of components can be determined by the developer percisely.
Vue 2 example
`` js
import mdiVue from 'mdi-vue/v2'
import * as mdijs from '@mdi/js'
Vue.use(mdiVue, {
icons: mdijs
})
`
Vue 3 example
` jsApp
import { createApp } from 'vue'
import mdiVue from 'mdi-vue/v3'
import * as mdijs from '@mdi/js'
// according to the vue 3 documentation
createApp(App).use(mdiVue, {
icons: mdijs
}) // etc...
`
For fun we add the react logo here
` html`
Simply install it using your favourite package manager
eg:
` sh`
$ npm install --save mdi-vue @mdi/js` sh`
$ yarn add mdi-vue @mdi/js
Since the library isn't transpiled, the library needs to be added explicitly to
build config.
` js`
export default {
// ...
build: {
transpile: ['mdi-vue']
}
}
command.For Vue version 2 this happens globally with
Vue.use() for version 3 however the "use" method became an instance method,
therefore app.use() is the place to start with.Once the lib has been registered the component
mdicon should be available across your project. To render an icon of your
choice just pass the component the name prop with the desired icon.` html
`Props
$3
The name of the icon to render in camel- or pascal case format.$3
` html
$3
Sets the width and the height of the of an icon, given that no with or height was provided to the icon itself
` html
`
Since the size property serves as a fallback to both width and height properties the above examples are equal to the following ones
` html
`$3
Applies a css spin/rotate animation to the icon
` html
``