How To Add Custom SVG Icon in Vuetify - Vue

Question

I'm using vuetify 1.1.8 and vue 3.0.0-rc.3. I am trying to use some of the custom SVG icons in my project, which I have designed, instead of default icons from Material Icons or FontAwesome Icons which are supported by vuetify

I have tried using vue-svg-loader to load my custom svg icons, and use them as components. Something like this

<template>     <icon-one></icon-one> </template>  <script>     import iconOne from './public/iconOne.svg'     export default{         components:{                  iconOne           }     } </script> 

But the problem with vue-svg-loader is that I cannot use them in <v-text-field>'s append-icon and many other places where I had freedom with <v-icon>.

I have also read the vuetify docs where they have mentioned about using custom icons but I don't think that is helping too.

Can someone help me out with this. May be I should try sprite-images as supported by material angular

TL;DR

I have custom self-made SVG Icons, and I want to use them as <v-icon>customIcon</v-icon> in vuetify

Answer 1

Per vuetify v2 docs

Create custom component which contains the svg icon code

// CustomIcon.vue <template>   <svg>     ...   </svg> </template> 

Include the custom icon component in vuetify config:

// vuetify.ts  import CustomIcon from '@/components/CustomIcon.vue'  export default new Vuetify({   theme: {/**/},   icons: {     values: {       custom: { // name of our custom icon         component: CustomIcon, // our custom component       },     },   }, }) 

Use it like so

<v-icon>$vuetify.icons.custom</v-icon>

Or shortcut:

<v-icon>$custom</v-icon>

Answer 2

You can, indeed, create a vue icon inside of its own Vue single file component, and then register this component so that vuetify can use it inside of the VICon (v-icon) component.

To create a vue component icon, you just need to place an SVG inside of the template tags as shown in the Vue Cookbook. This document should help you use the component in any vue app, as well.

<template>     <svg>...</svg> </template> 

Next, you need to register this component with vuetify. The Vuetify config is sometimes in the index file, or in the modern vue-cli, it will be found in @/src/plugins/vuetify.js.

There, you can register your component as shown on Vuetify's site (you already mentioned this link), but maybe this documentation is an update or unclear.

Now this component will be registered and can be used anywhere inside of VApp. However, unlike standard icons, you need to use $vuetify.icons.[icon-name] inside the slot of v-icon. In the Vuetify example, the icon is registered as 'product.' To use this, you'd include

<v-icon>$vuetify.icons.product</v-icon> 

I have this working in an on-going project. I'll leave a branch of the current state here.

The icon component is in /src/icons. The Vuetify config is in /src/plugins, and svg icon component is in /src/components/PlotSelector.vue.