🔒 Learn how to create more secure apps at the "Best Practices for Securing Your Mobile Apps" webinar. Register today!

NativeScript Angular

User Interface Icon Fonts

While bitmap images are great, they present challenges in designing mobile applications. Images increase the size of the application if they are embedded in it. If not, they require additional http requests in order to be fetched. Images consume memory. Furthermore, bitmap images do not scale well. If scaled up, they will lose quality. If scaled down, they will waste space. On the other hand, fonts scale well, do not require additional http requests for each glyph and do not increase memory usage significantly. Icon fonts contain icons instead of alphabet characters and can be used instead of images in mobile applications.

Using Icon Fonts in NativeScript

  1. Choose or generate an icon font that best matches your needs. Two popular icon fonts are IcoMoon and Font Awesome.
  2. Once you have downloaded the icon font to your machine, locate the TrueType font file with extension .ttf.
  3. In your NativeScript application app folder (for Angular 6+ src folder), create a folder called fonts and place the .ttf there.
  4. Follow the instructions on the icon font webpage to determine the hex codes of each font glyph, i.e., icon. Add a Label component to your NativeScript app and bind the Label's text property to a one-letter string generated from the character code of the icon you want to show, i.e., String.fromCharCode(0xe903).

Do not forget to set the Label's font-family to the name of your font either through CSS, XML or code-behind. Remember: Android needs the actual filename (without extension) whereas iOS needs the font name. To be cross-platform-ready, you can provide both.

Icon Font

icomoon

Fonts Folder

icon-fonts

The Code

@Component({
    // ...
})
export class IconFontComponent {
    public glyphs = new Array<{ icon: string, code: string }>();
    constructor() {
        for (let charCode = 0xe903; charCode <= 0xeaea; charCode++) {
            let glyph = {
                icon: String.fromCharCode(charCode),
                code: charCode.toString(16)
            };
            this.glyphs.push(glyph);
        }
    }
}
<GridLayout>
    <ListView [items]="glyphs">
        <ng-template let-item="item">
            <StackLayout orientation="horizontal">
                <Label [text]="item.icon" class="icon"></Label>
                <Label [text]="item.code"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
</GridLayout>
.icon {
   font-family: 'icomoon';
   font-size: 48;
}

And the result is:

sample-app