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

I think you're getting confused between material icons and awesome font icons — Fmerco, Feb 21 '20 at 11:25
https://stackoverflow.com/questions/41861386/nativescript-and-fontawesome/41861624 — alexander.sivak, Feb 21 '20 at 11:26
@alexander.sivak I have already followed the link you sent me, it doesn't work — Silvia, Feb 21 '20 at 11:30
@Fmerco No, I'm not confused.. I tried both solutions with FontAwesome and Material Icons... same issue — Silvia, Feb 21 '20 at 11:31
@Silvia You presented an example inconsistent with the error — Fmerco, Feb 21 '20 at 11:34
try to remove Plugin "nativescript-fontawesome" and change text="" to text="" — Yong, Feb 21 '20 at 14:59
@Yong done. I get the same error message: _Plugin nativescript-fontawesome is not included in preview app on device [my-device-id] and will not work_ — Silvia, Feb 21 '20 at 15:31
You can not use all the plugins with preview app, it allows only limited number of plugins those were packed with the app (such as camera, image picker etc.,) To use Font Awesome icon on buttons / images like showcased above, you do not need a plugin. The code should work as long as you have a right icon set and font file installed. If you still have issues, please share a Playground sample. — Manoj, Feb 21 '20 at 15:55
@Silvia, You do not need a plugin. I share a demo, https://play.nativescript.org/?template=play-ng&id=IP5pOk&v=3. You can also provide a sample, so that we can help you further. — Yong, Feb 24 '20 at 10:12

Jan Willem Keizer · Answer 1 · 2021-05-20T18:36:50.553

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>

NativeScript + Angular: How to install and use icons?

1 Answers1