How to use a fonticon inside a NativeScript <Button>

Question

I'm running into a font-family collision when trying to use a icon font on a <Button>.

For example:

<Button class="btn btn-primary fas" text="{{'fa-film' | fonticon}} Test"></Button>

CSS:

.fas {
  font-family: 'Font Awesome 5 Free Solid', fa-solid-900;
}

When using the Nativescript themes, it defines the font-family for the .btn class. As you know iconfonts rely on font-family as well.

So in the button above how do apply one font-family to the string Test while applying another font-family to the icon?

If you use the NativeScript Angular SASS starter app and define .fas in _app-common.scss and use my button above, you will see that the icon displays as a ?. This is because .btn is overriding the font-family.

I could solve this by giving the icon font-family a higher precedence - but this would prevent me from styling the textual font on the button.

Non-nativescript implementations of font icons inside buttons solve it by being able to put an element (like <span>) as a child element to <Button>. Example here.

How can you accomplish this with NativeScript <Button>?

Answer 1

The answer is to use FormattedString. It allows you to apply a class to each element.

Ex:

<Button (tap)="onTap($event)" class="btn btn-primary">
    <FormattedString>
        <Span class="fas" text="{{'fa-film' | fonticon}}"></Span>
        <Span text=" Test" fontAttributes="Bold"></Span>            
    </FormattedString>
</Button>