FontAwesome with Vuetify - How to include Font Awesome icons within the v-icon component

Question

Hopefully someone will know where I have gone wrong here - I'm trying to implement the Font Awesome package with Vuetify. Font Awesome is all imported and ready to go (setup is indentical to projects which I have Font Awesome successfully integrated):

My bare basics main.js file:

import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import store from './store'
import './registerServiceWorker'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCode } from '@fortawesome/pro-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCode)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

And within a component I am referencing an icon as follows:

My Component.vue:

<template>
    ...
    <v-btn>
        <v-icon>fas fa-code</v-icon>
    </v-btn>
    ...
</template>

^ Where I have left out superfluous code*.

So, my question is - how do we integrate Font Awesome within Vuetify's v-icon component?

For reference, I’m using what is outlined here:

https://vuetifyjs.com/en/components/icons

Which is identical to what I have prescribed above, but sadly my icon does not display...

Update: I specifically want a solution which doesn't include adding the rather heavy Font Awesome all.css file (<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">) - instead importing on an icon by icon need. (the overall weight of the minified all.css file is 52kb in v.5.2.0.

Answer 1

For a Nuxt/Vuetify Project:

Complementing the above answer, you can also set it up in the Vuetify configuration file, that is created during the project installation ( "plugins/vuetify.js" ), adding the "iconfont" prop:

import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
 iconfont: 'fa'
})

Now, use with the icon component like this:

<v-icon>fab fa-vuejs</v-icon>