Javascript Vue

Material Design Svg Icons for Vue.js2 min read

Material Design Svg Icons for Vue.js

Library to render Material Design Svg Icons in Vue.js

Never mind the project name, you can actually use any monochrome svg icon(like Font Awesome Svg).

📖 Doc for Simplified Chinese


Here we use @mdi/js as an example

yarn add @mdi/js @yeliulee/vue-mdi-svg
# OR
npm install @mdi/js @yeliulee/vue-mdi-svg


For better Tree Shaking Optimization, you have to import icons by your self

If you want to import all icons to your apps, please refer to mdi-vue

For Vue 2

// main.[js|ts] According to your project
import Vue from ‘vue’;
import MdiSvg from “@yeliulee/vue-mdi-svg/v2”
import App from ‘./App.vue’;


// demo.vue
<MdiSvg> {{ mdiAccount }} </MdiSvg>

import { mdiAccount } from “@mdi/js”
export default {
data: () => ({

For Vue 3

// main.[js|ts] According to your project
import { createApp } from ‘vue’
import MdiSvg from “@yeliulee/vue-mdi-svg/v3” // or just “@yeliulee/vue-mdi-svg”
import App from ‘./App.vue’ // According to your code

const app = createApp(App)
// etc…

// demo.vue [same as vue2 without setup syntax]
<MdiSvg>{{ mdiWechat }} </MdiSvg>

<script setup lang=“ts”>
import { mdiWechat } from ‘@mdi/js’

Nuxt.js 2 / 3

both Nuxt.js 2 / 3 support Vue plugins, please read the corresponding documentation



The path of Svg, it won’t work if slot is used

<MdiSvg :path=”mdiReact” />

<script setup lang=”ts>
import { mdiReact } from ‘@mdi/js’


The description of svg.

size(numeric or string; default: 24)

The width and height of the icon, it will work if no width or height is provided

<MdiSvg :size=”48″> {{ your icon }} </MdiSvg>

<MdiSvg :width=”16″ :height=”16″> {{ your icon }} </MdiSvg>


The width of the icon


The height of the icon


The viewbox of the svg icon


Apply a spin/rotate animation to the icon

<MdiSvg spin> {{ your icon }} </MdiSvg>
<MdiSvg :spin=”true> {{ your icon }} </MdiSvg>


This libray is based on mdi-vue, thanks to @therufa and all mdi-vue‘s contributors


View Github

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Generated by Feedzy