Override individual Vuetify icon with Font Awesome SVG icon

user_555289 0
Viewed 202

Is it possible to override individual icons from Vuetify with Font Awesome svg icons, without writing an custom component for each icon?

Something like this: ???

import { svgPathData as envelopeSvg } from '@fortawesome/free-solid-svg-icons/faEnvelope'
import { svgPathData as questionCircleSvg } from '@fortawesome/free-solid-svg-icons/faQuestionCircle'


Vue.use(Vuetify)

const app = new Vue({
vuetify: new Vuetify({
    icons: {
        iconfont: 'md',
        values: {
            email: envelopeSvg,
            question_circle: questionCircleSvg
        }
    },
...
})

Update I kind of got the above code working, but now my current issue is the v-icon component renders using the wrong viewbox size.

<font-awesome-icon class="icon" icon="envelope" /> //viewBox="0 0 512 512"
<v-icon class="icon">email</v-icon> //viewBox="0 0 24 24"
font-awesome vuetify.js vue.js svg
1 Answers

You need to add proper way

https://vuetifyjs.com/en/features/icon-fonts/#font-awesome-5-icons

yarn add @fortawesome/fontawesome-free -D


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

Vue.use(Vuetify)

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

UPDATE: according to Git Issue

You need to install all fonts you need or add links to CDNs, iconfont only specifies which icon set will be used for default Vueitfy icons (such as arrow in v-select etc)

<v-icon>mdi-user</v-icon> // MDI will be used
<v-icon>user<v-icon> // Material Icons will be used
<v-icon>fas fa-whatever<v-icon> // FA will be used
user_4779020
Related