[Bug Report] fontawesome svg not working

[ricardovanlaarhoven]

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:

[nekosaur]

I think you might now have pushed the correct code?

[ricardovanlaarhoven]

Oops, didn't pushed it! You could check again :)

[icleolion]

While there may indeed be a bug with this method, can I recommend you go another way as I guarantee this way works with the added bonus of a reduced bundle size. This method will require you to only import the icons you actually use instead of the whole solid style library.

Follow the example guide here: https://vuetifyjs.com/en/features/icons/#font-awesome-pro-icons Then using the vuejs icon from that example you can use it as follows: <v-icon v-text="'$vuetify.icons.vuejs'" /> Or if you prefer shorthand: <v-icon v-text="'$vuejs'" />

[ricardovanlaarhoven]

@icleolion That's a nice solution/workaround

But how could you import and use 2 icons from different weights? So for example ['fas', 'fa-star'] and ['far', 'fa-star'] (far/fas)

[icleolion]

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'],
        },
      },
    },
  },
})```

[ricardovanlaarhoven]

Ofcource.. didn't excpect that i could alias this..

thnx!

[noalbalint]

I've also been noticing strange behaviour with v-icon.

basically, my code is

<v-list-item v-for="network in group.networks">
   <v-icon v-text="network.icon"></v-icon>
</v-list-item>

where network.icon = fak fa-nairaland. And then in the console, what gets compiled and rendered is

<i aria-hidden="true" class="v-icon notranslate fak fa fak fa-nairaland theme--light"></i> , which loads a different icon than the one I want.

this seems to be true for all of my icons; if the icon name is abc xyz-asdf what will get compiled is abc xyz abc xyz-asdf. But it only seems to break my fontawesome custom kit icons.

[KaelWD]

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.

[fnagel]

So this is broken and you don't plan to fix it or document it? Good to know.

[KaelWD]

@fnagel fak was fixed in 2.5.1 (#13649)

[fnagel]

@KaelWD Not for FA SVG afaics.

[KaelWD]

If you mean the js kits then no that will never be fixed, it's incompatible with vue.

[fnagel]

No, I'm talking about the topic of this ticket: Font Awesome SVG is not working

[KaelWD]

I addressed that in https://github.com/vuetifyjs/vuetify/issues/12625#issuecomment-839912538. It's been improved in v3 so you don't need to register everything manually: https://next.vuetifyjs.com/en/features/icon-fonts/#font-awesome-svg-icons

[fuzzzerd]

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.