CODEWITHSUNDEEP
vue.jswebpackvuetify.js
Michael
Michael

Reputation: 5048

How to get vuetify to display 'mdiSvg' icons?

Following the documentation here: https://next.vuetifyjs.com/en/customization/icons I setup my project exactly as described. Expected: seeing an <svg> tag. Actual: I see an <i> tag (which causes issues with some settings on IE) Here is a link to a reproduction: https://codesandbox.io/embed/dialog-vuetify-bhs76

Upvotes: 5

Views: 1913

Answers (2)

nvitaterna
nvitaterna

Reputation: 463

This is the way I've been doing it. If you want, you can also set custom names for icons - which is very useful if you decide to change which icons you use:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import {
  mdiDelete
} from '@mdi/js';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
    values: {
      mdiDelete,
      // or give it a custom name:
      delete: mdiDelete,
    }
  },
});

Then in your v-icon component:

<v-icon>$mdiDelete</v-icon>
<v-icon>$delete</v-icon>

Upvotes: 3

Klod Lala
Klod Lala

Reputation: 173

you should install the right icon library from the vuetify site
then import it on the vuetify plugin folder

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  },
})

least and last you should use the icon on the component

    <template>
      <div>
          <v-icon>{{mdiMenu}}</v-icon>
      </div>
    </template>

    <script>
    import { mdiMenu } from '@mdi/js'; 
    export default {
      data() {
        return {
            mdiMenu
        };
      }
    };
    </script>

you can find icons on this material design site

Upvotes: 1

Related Questions