[SOLVED] How to use @nuxtjs/fontawesome icons in buefy?

How to use @nuxtjs/fontawesome icons in buefy?

I am using @nuxtjs/fontawesome icons in my nuxt ssr project
When used inside a Buefy input, these icons dont render
How do I make these work together

Solution

This one is a bit tricky and required some digging into several parts of the documentations + github issues. A working setup that I found is the following.

Create a Nuxt plugin with the following:

export default {
  // ...

  plugins: [
    { src: '@/plugins/vue-buefy', mode: 'client' },
  ],
}

Then head to the Fontawesome Icons page and select Free + Solid as here: https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free

Let's say we do choose Angry and Air freshener.
The latter is identified as <i class="fas fa-air-freshener"></i> (if you click on it). This will help us know the name of the icon to import.
This also gives us an insight that we need to use fas.

Then, the configuration is as following:

import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core' // import the mandatory

import {
  faAngry,
  faAirFreshener,
} from '@fortawesome/free-solid-svg-icons' // import the icons that you've choosen, VScode may suggest the import for you!

import Buefy, { // import Buefy, required
  Dropdown, // import the component that you want to use
} from 'buefy'

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // import the icon component for Buefy

library.add(
  faAngry,
  faAirFreshener,
) // add the icons you've selected
Vue.component('VueFontawesome', FontAwesomeIcon) // tell Vue to use the icon component

Vue.use(Dropdown) // same goes for the Dropdown
Vue.use(Buefy, {
  defaultIconComponent: 'vue-fontawesome', // the icon component that we are using
  defaultIconPack: 'fas', // the pack given by Fontawesome
})

This will help you achieve a dropdown or any component with icons. Which otherwise would have looked broken since Buefy expects that you provide it an icon library yourself.

This code will then work properly

<b-dropdown aria-role="list">
  <template #trigger="{ active }">
    <b-button :icon-right="active ? 'angry' : 'air-freshener'" />
  </template>
</b-dropdown>

Closed dropdown

Opened dropdown