NativeScript: FontAwesome icons not showing on OxygenOS 11

Environment ✔ Getting NativeScript components versions information… ⚠ Update available for component nativescript. Your current version is 7.0.10 and the latest available version is 7.0.11. ⚠ Update available for component tns-core-modules. Your current version is 6.5.20 and the latest available version is 6.5.21. ✔ Component tns-ios has 6.5.3 version and is up to date. ✔ Component tns-android has 6.5.3 version and is up to date.

Describe the bug I’m experiencing an issue with FontAwesome on version 11 of OxygenOS. It works great on OxygenOS 10 and iOS.

Icons from the “fas” class isn’t shown correctly anywhere in my apps. In the example image below, the one icon that is showing has class “far”, and the rest “fas” My setup is:

font

Example of how it looks:

OxygenOS 11 (wrong)	iOS 14 (correct)	OxygenOS 10 (correct)

To Reproduce Try running these examples on OxygenOS 11:

<Label text.decode="&#xf543;" class="nt-icon fas" />
<Label text.decode="&#xf02a;" class="nt-icon fas" />

Expected behavior Icons to be shown

Sample project I can give access to my project if needed

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 38 (18 by maintainers)

Most upvoted comments

@asharghi Short version: The setup steps are the same as for FontAwesome.

More details:

Setup Steps

Get the latest MaterialIcons-Regular.ttf from the GitHub Repo and copy it to src/fonts, e.g. v4.0.0 (or v3.0.1)
Add the following to your css:

.m-icon { // or any other class name you prefer
  font-family: "Material Icons", "MaterialIcons-Regular";
  font-weight: 400;
}

Example Usage:

<FlexboxLayout justifyContent="space-between">
    <Image src="font://&#xe8e5;" class="m-icon" width="22"></Image>
    <Button text="&#xe8e5;" class="m-icon -primary" fontSize="22"></Button>
    <Label text="&#xe8e5;" class="m-icon m-t-15" fontSize="22"></Label>
</FlexboxLayout>

Appearance compared to FontAwesome

Screenshot_20210112-140810

Resources

Available Icons: https://material.io/resources/icons/
Codepoints: https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints

Make sure to run ns clean after adding new font files.

jessorlisa on Jan 12, 2021

@jessorlisa @felixkrautschuk could you try to reproduce it in an android 11 emulator? If you do then you can share a repro example and we can take a look at finding a solution/workaround

farfromrefug on Dec 15, 2020

@jessorlisa @asharghi just a heads up, in latest CLI you can run ns fonts to figure out the correct font-family and font-weight values for your custom fonts!

rigor789 on Jan 12, 2021

I downloaded the ttf file here but now I do not know how to install the font in the emulator. I found some old instructions but they do not work.

felixkrautschuk on Dec 15, 2020

@NathanaelA just tried OnePlusSans on my samsung device. No issue, icon fonts works perfectly. I think it is an OxygenOS issue. You can easily find forums posts about this on the web.

farfromrefug on Dec 14, 2020