How to add SVG image to vuetify text field

user_8396562 0
Viewed 9786

I am using vuetify and would like to add an SVG icon to the start of the text field. I know you can prepend or append icons from v-icon, but I would like to use my own SVG image in a similar way.

vuejs2 vuetify.js vue.js
2 Answers

Just use the "prepend" slot:

<v-text-field label="My text field" type="text">

    <template v-slot:prepend>

      <img width="24" height="24" src="[PathToAssets]/whatever.svg" >

    </template>

  </v-text-field>
user_60703240

You can read about the public path

I would strongly recommend using the public path:

Add your svg image to public/img/icons/test.svg.

Use the img tag like this <img src="/img/icons/test.svg"> to point to the svg location.

If you really dont want to use the public path for your svg's you can use this loader to import your svg's: https://github.com/visualfanatic/vue-svg-loader

user_87693280
Related