CODEWITHSUNDEEP
cssvue.jsvuetify.js
mlst
mlst

Reputation: 3401

How can I use custom SVG icon inside Vuetify v-icon component?

I know I can use predefined material design (or font awesome etc...) icons in Vuetify like this:

<v-icon>mdi-clock</v-icon>

But is there a way to use v-icon component to display my custom icon defined as svg in my-icon.svg file? This .svg file is located located in my project public/img directory but how can I reference it inside v-icon component?

Upvotes: 3

Views: 11092

Answers (2)

Harshit T
Harshit T

Reputation: 886

You can achieve the same using CSS.

.v-icon
  height 20px
  width 20px
  &.engine
    background-image url(https://www.svgrepo.com/show/9344/train.svg)
    background-size contain
    background-repeat no-repeat
  &::before
    visibility hidden
    content ""

check out this codepen.

Upvotes: 2

User 28
User 28

Reputation: 5158

AFAIK If you want to use as external svg, the answer is unfortunately no.

Anyway, you can import the svg file as a component with vue-svg-loader then use inside v-icon.

import Stack from "@/icons/stack.svg"; // import /src/icons/stack.svg

export default {
  components: {
    Stack
  }
};

Then use it

<v-icon>
  <Stack/>
</v-icon>

Another solution How To Add Custom SVG Icon in Vuetify - Vue.

Upvotes: 2

Related Questions