vuetify: [Bug Report] fontawesome svg not working

Environment

Vuetify Version: 2.3.17 Vue Version: 2.6.11 Browsers: Chrome 86.0.4240.193 OS: Windows 10

Steps to reproduce

Followng the faSvg guide on the vuetify docs does not result in a working v-icon

Expected Behavior

faSvg icons should show up

Actual Behavior

faSvg icons do not show up

Reproduction Link

https://github.com/ricardovanlaarhoven/fontawesome-svg-test

Other comments

in my example i’ve added multiple icons and only when i don’t use vuetify for rendering icons it does work

<template>
  <v-app>
    <v-main>
      v-icon:
      <v-icon>fas fa-user-secret</v-icon>
      <v-icon>fa-user-secret</v-icon>
      <v-icon>user-secret</v-icon>
      <v-icon>cancel</v-icon>
      font-awesome-icon:
      <font-awesome-icon icon="user-secret"></font-awesome-icon>
    </v-main>
  </v-app>
</template>

results in:

chrome debugger:

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 15 (10 by maintainers)

Most upvoted comments

It would be nice to have this noted in the documentation for font-awesome svg icons in the v2 docs. I spent a while trying to figure out what was wrong before I found this issue and learned I had to explicitly register individual icons.

fuzzzerd on Jun 2, 2021

fak didn’t exist when this was written, in fact I think even fontawesome 5 in general was hacked together on top of the existing fa4 support. We won’t be changing the way this works in v2, but it has been rewritten in v3 and should support more custom icons now: https://next.vuetifyjs.com/en/features/icon-fonts/#font-awesome-svg-icons

@ricardovanlaarhoven To use faSvg currently you do have to manually define each icon you want to use then access them with a $ prefix. The iconfont: 'faSvg' only registers the subset of icons that other vuetify components use.

KaelWD on May 12, 2021

My preference is to prefix the style shorthand to the icon name. Simple, short and makes any future find+replace exercises a doddle. So tweaking the https://vuetifyjs.com/en/features/icons/#font-awesome-pro-icons example, here’s how that would look:

import Vuetify from 'vuetify/lib'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faBars as falBars } from '@fortawesome/pro-light-svg-icons'
import { faBars as fasBars } from '@fortawesome/pro-solid-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(falBars, fasBars)

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    values: {
      falMenu: {
        component: FontAwesomeIcon,
        props: {
          icon: ['fal', 'bars'],
        },
      },
      fasMenu: {
        component: FontAwesomeIcon,
        props: {
          icon: ['fas', 'bars'],
        },
      },
    },
  },
})```

icleolion on Nov 25, 2020