Vuetify: [Bug Report] Font Awesome icons do not work properly with Vue/Vuetify

[amyngb]

Versions and Environment

Vuetify: 1.0.5
Vue: 2.5.13
Browsers: Chrome 64.0.3282.186
OS: Windows 8.1

Steps to reproduce

In the CodePen, click on the lock icon in the Font Awesome text field. It does not change per the callback. Then, click on the lock icon in the Material Icons text field. It changes to the lock-open icon.

Expected Behavior

The fa-lock icon should change to the fa-lock-open icon when clicked, according to the icon callback function, just like it works with the Material icons.

Actual Behavior

The fa-lock icon doesn't change to the fa-lock-open icon when clicked. It's not actually calling the icon callback function.

Reproduction Link

https://codepen.io/amyngb/pen/geOMMJ

[KaelWD]

font-awesome's JS fucks with the DOM, so I don't think it really works with vue very well. You might notice that it also doesn't update when you click on the other one. I'd recommend using the css icon font instead: https://codepen.io/anon/pen/yKLJQo?editors=1010

https://github.com/FortAwesome/vue-fontawesome/issues/35#issuecomment-355635513

[johnleider]

@KaelWD is correct. The new FA does not play very nice, probably why they created their own component for it. Maybe we can look to that for some guidance.

[sreecodeslayer]

Came across this Vue-Fontawesome

[KaelWD]

v-icon now supports custom icon components, and there's even a guide to use it with fontawesome: https://vuetifyjs.com/en/framework/icons#custom-components