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

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>


You can use tree shaking.

Since you are looking for an option to avoid loading all icons into vue/vuetify, I suggest that you utilize the tree shaking method and add each icon you want to use, manually. This can be a bit tedious but adding in icons on demand will be beneficial in the long term - as webpack will just bundle up the ones you specify.

Please note:

In this tutorial, I assume that the reader has the Pro package. If you only want to use the free ones just remove anything resembling pro from the mix

Below you can see my preferred way of doing this with vuetify and using SVGs with v-icon and v-text/v-html:

First we have to install the icons:

(open up your terminal/command-prompt inside your project and install)

$ npm i --save @fortawesome/fontawesome-svg-core // this is the svg core, it is needed.
$ npm i --save @fortawesome/vue-fontawesome // Vue integration *
$ npm i --save @fortawesome/free-brands-svg-icons // Branding icons
$ npm i --save @fortawesome/free-regular-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/free-solid-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/pro-regular-svg-icons // Pro icons regular type
$ npm i --save @fortawesome/pro-light-svg-icons // Pro icons light type
$ npm i --save @fortawesome/pro-solid-svg-icons // Pro icons solid type
$ npm i --save @fortawesome/pro-duotone-svg-icons // Pro icons duotone type ***
  1. ( * ) The vue integration bundle more info
  2. ( ** ) Only needed for free icons, if you own Pro and followed the instructions here, they are are included in pro already.
  3. ( *** ) As of writing, the duotone icons are not completely integrated yet, beware of errors.

Then lets add this to our vuetify configuration:

I assume here that you use vuejs with javascript (not typescript) and that you've installed vuetify through vue add vuetify. The vuetify.js file should reside inside the plugins folder in your src folder. Your milage may vary.

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
// ... there should be more here, but see next part below ...

Vue.component('font-awesome-icon', FontAwesomeIcon) // add it to vue
Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'faSvg', // The bees knees, what most people are looking for.
  },
});

Ok, now that we've added the main components of FontAwesome 5, let's use treeshaking to instruct which icons we'd like to use for our project. I will only use two icons as examples: fa-plus and fa-user-circle, and I will add them for three of the Font Awesome Pro 5 packages we installed (Light, Regular and Duotone) and then I will add some others (bars and user) for the solid, to see how this can be done in both ways at the same time.

So back to our vuetify.js file, we replace

// ... there should be more here, but see next part below ...

with the following (note camelcase):

// src/plugins/vuetify.js
// ...
import { 
    faBars,
    faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
    faPlus as farPlus,
    faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
    faPlus as falPlus,
    faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
    faPlus as fadPlus,
    faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'
// ...

Quick note: If you still would like to add the entire library of these, you can do that by importing like so: import { far } from '@fortawesome/pro-regular-svg-icons' (for regular) and so on.

As you can see, we've now added fa-plus and fa-user-circle to our project. From here, we need to add them to the library we imported into the vuetify.js config. (don't sweat, the whole file can be seen below in the code snippet.):

// src/plugins/vuetify.js
// ...
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
    faBars, faUser,
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
/// ...

Now that we've added them to the library, we need to hand them over to vuetify. Vuetify has some special icons that they use for things like the <v-app-bar-nav-icon></v-app-bar-nav-icon> (hamburger menu). We can customize these, and add our own to the mix (if we'd like). I do this by defining a constant and add all the icons I need in there, like so:

const CUSTOM_ICONS = {
    add: { // custom icon I want to use
        component: FontAwesomeIcon,
        props: {
            icon: ['fad', 'plus']
        }
    },
    menu: { // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: {
            icon: ['fas', 'user']
        }
    }
}

and then we add this constant to the config like so:

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

You could also add them directly into the values variable, but I find it more readable to do it through a constant.

Now we can use these in templates, appends or prepends:

<template>
    <v-app>
        <!-- reference the whole path -->
        <v-icon>$vuetify.icons.add</v-icon>
        <!-- but this is easier -->
        <v-icon>$add</v-icon>
        <v-select
            :items="direction"
            label="Select direction"
            menu-props="auto"
            prepend-icon="$unfold" <!-- short version -->
            append-icon="$vuetify.icon.unfold" <!-- long version -->
            >
        </v-select>
    </v-app>
</template>

Finally, here is the complete example:

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
import { 
    faBars,
    faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
    faPlus as farPlus,
    faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
    faPlus as falPlus,
    faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
    faPlus as fadPlus,
    faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
    faBars, faUser,
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
    add: { // custom icon I want to use
        component: FontAwesomeIcon,
        props: {
            icon: ['fad', 'plus']
        }
    },
    menu: { // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: {
            icon: ['fas', 'user']
        }
    }
}

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
    values: CUSTOM_ICONS,
  },
});
<template>
    <v-app>
        <!-- reference the whole path -->
        <v-icon>$vuetify.icons.add</v-icon>
        <!-- but this is easier -->
        <v-icon>$add</v-icon>
        <v-select
            :items="direction"
            label="Select direction"
            menu-props="auto"
            prepend-icon="$unfold" <!-- short version -->
            append-icon="$vuetify.icon.unfold" <!-- long version -->
            >
        </v-select>
    </v-app>
</template>

Suggestion separate files for better reading

We can separate the fontAwesome logic to another file:

So we have 2 files:

  • the fontAwesome.js where you do all the logic belonging to fontAwesome
  • the vuetify.js you will import the Icons from fontAwesome.js
// src/plugins/fontAwesome.js
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
import { 
    faBars,
    faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
    faPlus as farPlus,
    faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
    faPlus as falPlus,
    faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
    faPlus as fadPlus,
    faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'

library.add(
    faBars, faUser,
    farPlus, falPlus, fadPlus, 
    farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
    add: { // custom icon I want to use
        component: FontAwesomeIcon,
        props: {
            icon: ['fad', 'plus']
        }
    },
    menu: { // used for the nav-icon by vuetify
        component: FontAwesomeIcon,
        props: {
            icon: ['fas', 'user']
        }
    }
}

export { CUSTOM_ICONS }

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { CUSTOM_ICONS } from "./fontAwesome"

Vue.use(Vuetify);

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

<template>
    <v-app>
        <!-- reference the whole path -->
        <v-icon>$vuetify.icons.add</v-icon>
        <!-- but this is easier -->
        <v-icon>$add</v-icon>
        <v-select
            :items="direction"
            label="Select direction"
            menu-props="auto"
            prepend-icon="$unfold" <!-- short version -->
            append-icon="$vuetify.icon.unfold" <!-- long version -->
            >
        </v-select>
    </v-app>
</template>

Further reading:

  • Why use Font Awesome with library as a concept?
  • Vuetify: how to install Font Awesome 5
  • Using Font Awesome with VueJS

A simple solution is posted under framework options in Vuetify: https://vuetifyjs.com/en/framework/icons

Install icons library using NPM or yarn: 

npm install @fortawesome/fontawesome-free -D

Config - For a simple vue project

Add this to your main.js

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

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

Config - For a nuxt + vuetify project

Create a js file(eg icons.js) under plugins

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

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

Add this to your plugins in nuxt.config.js

{ src: '~/plugins/icons.js', ssr:false }

Usage

Now you can access font awesome icons using v-icon or append/prepend in component like:

<v-slider
v-model="energy"
color="red"
label="Energy"
min="1"
max="100"
thumb-label="always"
prepend-icon="fa-burn"
></v-slider>

Tags:

Font Awesome

Vue.Js

Vuetify.Js

Related

Sorting strings in descending order in Javascript (Most efficiently)? LocalDateTime.now() has different levels of precision on Windows and Mac machine ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment mat-autocomplete auto-hide placeholder text on input focus How can I get an input's value on a button click in a Stateless React Component? bottom sheet with initial height half of screen and if it scroll then height is increase to full screen Get old Xcode Object Library style from Xcode 10 How to inject dependencies inside an ASP.NET Core Health Check Launching Edge with a file URL OpenBLAS blas_thread_init: pthread_create: Resource temporarily unavailable How to Create Dataframe from AWS Athena using Boto3 get_query_results method Switch Spyder Environment without installing spyder at each environment

Recent Posts