How to use a fonticon inside a NativeScript <Button> - nativescript

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>