angular-fontawesome icons instead of preloaded fontawesome

[jkon]

I am using the official angular fontawesome 5 package and I can’t seem to get those icons to work in my onsen ui tabbar tabs. I tried to do a custom tab using the method here under the “the tab element” section: https://onsen.io/v2/api/js/ons-tab.html
But this breaks by tabs with an error about a function that looks private (._hide). Has anyone else used ngx-onsenui and angular-fontawesome? Is there something I’m missing? I don’t want to have to load two versions of font awesome as they will probably conflict.
I am using Angular 8.2.14 and angular-fontawesome 0.4.0
Thanks

[emccorson]

Maybe try using OnsenUI core https://onsen.io/v2/guide/appsize.html#removing-icon-packs

This is Onsen without the icons included so you should be able to use it to avoid conflicts with your own icons.

[jkon]

thanks @emccorson, but I tried that too, and it doesn’t solve the issue of how to use angular-fontawesome in the tabbar icon. I can’t pass a fa-icon object to the tab or use an <fa-icon> element inside the <ons-tab> element.
I also tried using material icons instead and those don’t render either. I think there is an issue with how my angular setup is loading the icon fonts when loading the onsen css. I realize that I might not be able to get help here with that problem then, but I could get around my issue by figuring out how to use angular-fontawesome instead inside my <ons-tab> elements.

[emccorson]

I don’t have a good understanding of angular-fontawesome, but the fa-icon included with it is an Angular component, right? In that case, I don’t think it’s going to work with Onsen because Onsen works by reading the string in the icon attribute and compiling it internally. You can see the result of this by inspecting an ons-icon in your browser dev tools.

Is the issue that you want to use icons that are not included in OnsenUI already?

[jkon]

Well, the issue is that I can’t figure out why my deployment setup is not loading the font packs correctly. I get ots parsing errors when they are downloaded. I have spent days trying to figure out why and don’t want to waste anymore time on it. If I could use html elements or angular components instead, I could get around the issue. I am able to use <fa-icon> inside the ons-toolbar because they allow inner html content. I don’t understand why the tabs don’t have a way to do it too.

[emccorson]

It might work to set the icon attribute of ons-tab, then inspect the tab in your browser’s dev tools, and copy the compiled result from the inspector into your source code. This way Onsen doesn’t compile the tab because you’re already using the transformed version of the tab. Then you should be able to put HTML child elements in the tab.