How to use within a <Button>?

[rynop]

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

Ex:

<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 impelmentations 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>?

[rynop]

The answer is to use Formatted String.

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>