Buefy: b-icon icon and custom-size doesn't work as expected.

[chrtz]

Overview of the problem

Buefy version: [0.6.6]
Vuejs version: [2.5.16]
OS/Browser: macOS 10.12.6 / Electron 2.0.2

Description

In my current project I use electron-vue with buefy and there seems to be a bug with FontAwesome icon sizes. (I came across the same bugs even with normal vue.js, chrome and buefy.. so it doesn't seem to be an electron issue!)

Steps to reproduce

first try fg. with "is-small" up to "is-large"

<b-icon size="is-small"></b-icon>
<b-icon size="is-medium"></b-icon>
<b-icon size="is-large"></b-icon>

This will only change the space around the icon from small to large, but the icon stays in the same size.
Therefore, I startet to use to combine it with "custom-size" f.g. fa-sm up to fa-lg and higher.

I recognized, that in the Buefy docs "fa-5x" is the biggest available size, while the FontAwesome docs can increase the icon size up to "fa-10x".
BUT: bigger than "fa-lg" will stay in fa-lg size, size won't be increased.

This is a pity if you try to make big buttons with icons :/

Expected behavior

Icon size changes on the Buefy b-icon size prop or at lease changes with the use of custom-size

Actual behavior

the normal icon size value just changes the space around the icon, icon stays in the same size.
custom-size just works until you reach fa-lg. Everything bigger than this is being ignored.

(PS: why isn't everything bigger than fa-5x not mentioned in the docs?)

[Patrick-Jun]

I have the same question. Have you solved it later?

[chrtz]

@Patrick-Jun, sorry I can't remember.

[Patrick-Jun]

I found a way
Use: vue-fontawesome

• Configured in main.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { faHeadphonesAlt} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faHeadphonesAlt)
Vue.component('vue-fontawesome', FontAwesomeIcon);

Vue.use(Buefy, {
    defaultIconComponent: 'vue-fontawesome',
    defaultIconPack: 'fas',
});

• Used in components：

<vue-fontawesome icon="headphones-alt" size="3x" />

We can use xs, sm, lg, 2x, 3x, 10x .etc