V-icon

lastmod 2022-03-28created 2021-07-147 edits

Categories

• Web typography#Inline SVG - How to inline SVG directly on the web.

Material Design Icons

You can browse the list on the following sites.

• Material Design Icons
• Google Fonts - Material+Icons
• Vuetify - Icon fonts # Material Design Icons

Options

icons.iconfont

Sets the default.

(Not verified) You don't need to pass the default icon class name.

Material Design Icons - JS SVG

• Vuetify - Icon fonts # Material Design Icons - JS SVG

Use the SVG paths as specified there. @mdi/js. This is the recommended installation when optimizing your application for production. You should only include this if you plan to use more than the default icons.

$ yarn add @mdi/js -D
// OR
$ npm install @mdi/js -D

Specify the mdiSvg icon font.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
  },
})

You can custom import only the icons you use, giving a much smaller bundle size.

<!-- Vue Component -->

<template>
  <v-icon>{{ svgPath }}</v-icon>
</template>

<script>
  import { mdiAccount } from '@mdi/js'

  export default {
    data: () => ({
      svgPath: mdiAccount
    }),
  }
</script>

How to use

Using MDI:

<v-icon>mdi mdi-access-point</v-icon>

Using Font Awesome:

<v-icon>fas fa-spinner</v-icon>

See also

• vuetify
• Webfont