NativeScript + Angular: How to install and use icons?

2
votes

I'm trying to use icons on my nativescript + angular app both for iOS and Android. I tried different way to set up icons, I used this tutorial, this solution and I even tried with material plugin and nativescript-ngx-fonticon.

All these methods give me this error:

Plugin nativescript-fontawesome is not included in preview app on device [device-id] and will not work.

Now, this is my current code:

mycomponent.component.html

<Button text="&#xf810" class="fa" column="0"></Button>

app.css

.fa {
    font-family: 'FontAwesome', fontawesome-webfont;
 }

Moreover I have in my app/fonts folder the following file :

fontawesome-webfont.ttf

So, what's wrong?

Thank you

1
angularnativescriptangular2-nativescriptnativescript-angularnativescript-plugin
I think you're getting confused between material icons and awesome font icons - Fmerco
stackoverflow.com/questions/41861386/… - alexander.sivak
@alexander.sivak I have already followed the link you sent me, it doesn't work - Silvia
@Fmerco No, I'm not confused.. I tried both solutions with FontAwesome and Material Icons... same issue - Silvia
@Silvia You presented an example inconsistent with the error - Fmerco

1 Answers

3
votes

There's no need for a plugin anymore. NativeScript supports Icon Fonts. https://v7.docs.nativescript.org/angular/ui/ng-components/icon-fonts

.far {
    font-family: Font Awesome 5 Free, fa-regular-400;
    font-weight: 400;
}

.fab {
    font-family: Font Awesome 5 Brands, fa-brands-400;
    font-weight: 400;
}

.fas {
    font-family: Font Awesome 5 Free, fa-solid-900;
    font-weight: 900;
}
  • You can now use
<!-- Using fa-solid-900.ttf -->
<Button text="&#xf810;" class="fas"></Button>