FontAwesome SVG icons with Vuetify - how to use within v-icon/prepend-icon?

If you want to use svg icons in v-icon/prepend-icon, then you need to access them through $vuetify.icons object. Any other text in the v-icon/prepend-icon will be interpreted as webfont/css class.

But for use $vuetify.icons object you should register custom icons. Example:

import Vue from "vue";
import Vuetify from "vuetify";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faVuejs } from "@fortawesome/free-brands-svg-icons";

Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
library.add(faVuejs); // Include needed icons.

Vue.use(Vuetify, {
  icons: {
    vue: {
      component: FontAwesomeIcon,
      props: {
        icon: ["fab", "vuejs"]

And now you can use vue-brand icon:

<v-text-field prepend-icon="$vuetify.icons.vue"/>

Also, you can use without register via font-awesome-icon:

<font-awesome-icon :icon="['fab', 'vuejs']" />
    <font-awesome-icon :icon="['fab', 'vuejs']" slot="prepend"/>

Out of the box vuetify has a preset of icons config that can be associated with SVG:

import { fas } from "@fortawesome/free-solid-svg-icons";
Vue.use(Vuetify, {
  iconfont: "faSvg"

But for use it you should call $vuetify.icons again (vuetify just wrap preset as component):


Full example codesandbox