Font-awesome SVG icons not working with Vuetify

Question

Why this isn't a duplicate of FontAwesome SVG icons with Vuetify - how to use within v-icon/prepend-icon?

That question shows how to add another icon and output it in your component by manually referencing it, whereas this question refers to the changing of the icons in the prebuilt components of Vuetify to SVG icons without the need to do any manual overriding in your Vue components, like the data-table's paginator.

I'm trying to use the SVG icons of font-awesome in a Vue project with Vuetify, I've followed the guide of installing the SVG font package on the Vuetify installation page here

https://vuetifyjs.com/en/customization/icons#install-font-awesome-svg-icons

By only including the config they specify which is:

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
  },
})

Icons simply get displayed as text in components, examples:

Search Icon

Footer of a data-table

The main problem is that it should change the prebuilt component's icons as far as I understand it otherwise you would need to manually specify the components icons each time you use it.

My full Vuetify setup file

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

Vue.component("font-awesome-icon", FontAwesomeIcon)
library.add(fas)

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: "faSvg",
  },
})

Answer 1

try this

import '@fortawesome/fontawesome-free/css/all.css'

Answer 2

I had a half success by adding a dom wacher.

import Vue from "vue";
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import { fas } from "@fortawesome/free-solid-svg-icons";

import { far } from "@fortawesome/free-regular-svg-icons";

library.add(fas, far);

Vue.component("font-awesome-icon", FontAwesomeIcon);

dom.watch();

dom watcher pulls svg for the icons. But not for the rest components like data-tables etc

<v-icon>fa-sign-out-alt</v-icon>

For the those icons i had to define every value manually: https://vuetifyjs.com/en/customization/icons#using-custom-icons

import Vue from "vue";
import Vuetify from "vuetify/lib";
import "./fontawesome";

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "faSvg",
    values: {
      checkboxOn: "fas fa-check-square",
      checkboxOff: "fas fa-square",
      checkboxIndeterminate: "fas fa-minus-square",
      menu: "fas fa-bars"
    }
  }
});

Still I could not get the checkbox working with svg. It won't change dynamicly when I click on it.

At this point I'll revert back to webfonts.

I'd rather use SVGs, so any solution is much appreciated

Answer 3

As of Vuetify 2.2.2 this is supported natively.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
library.add(fas) // Include needed icons

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
  },
})

See here for details