NativeScript + Angular: How to install and use icons?

Question

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

Answer 1

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

• Download the FontAwesome fonts for the web at https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself from the "Download Font Awesome Free for the Web" box.

• Save the *.ttf files in src/fonts:

  • fa-regular-400.ttf
  • fa-brands-400.ttf
  • fa-solid-900.ttf

• Add these lines to your app.css

.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>