ui-material-components: Missing icons in bottom navigation bar

Update:

<MDBottomNavigationTab title="Sensors" icon.decode="font://&#xf294;" class="fab"/>

seems to do the trick. I am quite certain I did try that a while ago and it didn’t work back then, but seems to work now.

This does not work for me.

I am implementing this on Angular Projects and tried everything, but could not get this to work directly.

<BottomNavigationTab title="Home" icon.decode="font://&#xf015;" class="fas"></BottomNavigationTab>

The only way it works is if I convert the font icon to ImageSource

<BottomNavigationTab title="Home" [icon]="homeIcon"></BottomNavigationTab>

and in TS,

let iconColor = new Color(255, 255, 255, 255);
let iconFont: Font;
if(isIOS)
    iconFont = new Font("Font Awesome 5 Free", 28, "normal", "900");
else
    iconFont = new Font("fa-solid-900", 28, "normal", "900");

this.homeIcon = ImageSource.fromFontIconCodeSync("\uf015", iconFont, iconColor);

@ray007 i found the issue! will try to fix it and release

@farfromrefug Ahh ok, I’m not super familiar with the native API, did not know that was the limiting factor here.

And @ray007 is asking how do you specify the css class that defines a font-family property. Just adding icon="font://&#xf1e0" does not work without it.

@farfromrefug I’m using bottomnavigationbar, so it’s probably got nothing to do with isIconSizeFixed.

@csimpi seems clear to me you should use something like "font://\uf015". If it does not work with angular you are welcome to fix any angular related issue. Again i wont

I’m using Vue so I can’t say much about angular. As I already wrote above, getting the actual character into the font: url also worked (with class attribute on tag). Try

this.homeIcon = "font://\uf015";

@farfromrefug yes, that sounds like what I want.

But it does not seem to work. And looking through the code for bottomnavigationbar I can’t find any mention of iconClass.

Searching through the repository I found iconClass in src/core/tab-navigation-base/tab-strip-item/index.ts, but that does not seem to be connected to the bottom navigationbar. And it does not seem to really be needed there…

@farfromrefug I understand the theory, but the problem here is, a <MDBottomNavigationTab> has title and icon attributes, and class is not applied for the icon. At least it wasn’t last I tried, and if it was we’d probably have a problem with title. Did I miss something?

@ray007 @ZachPerkitny i did not understand cause it was obvious to me as it works like any other component. simply apply a class to the component on which you use icon="font://&#xf1e0"

@ZachPerkitny it is not that easy. It depends on what the native API let us do. You are welcome to have a go at it and create a PR

i found a solution to use font icons! I’m using svelte, but the bindings are similar when using vue/angular/react etc.

<bottomNavigationTab title="Profil" icon="{profilIcon}"  />

import { ImageSource } from '@nativescript/core/image-source';
import { Font } from "@nativescript/core/ui/styling/font";
let color = new Color(255, 255, 255, 255); //you can also use css to set text and icon color togehter. thus this gets ignored. In that case just provide null as color
let font = new Font("fa-solid-900", 18, "normal", "900");
let profilIcon = ImageSource.fromFontIconCodeSync("\uf007", font, color);

@farfromrefug thank you, but that’s the same link I mentioned in my last comment. And getting the icon depends on class to select the correct font.

So if there is an option to set class for the icon I have not yet found it.

@ray007 https://docs.nativescript.org/angular/ui/ng-components/icon-fonts