Mobile app Best Practices - use Font instead of Image to show an icon

With the latest release of NativeScript you can use the huge amount of icon fonts available on the web inside your native mobile application. This works cross-platform, for both iOS and Android and is as simple as placing the font in the “app/fonts” folder and declaring the icon you want to use in the UI. The NativeScript framework is doing its magic behind the scenes so you don’t need to worry on which OS you run. This is just one those things that make your life easier and is helping you to reuse your existing skills/resources. (using CSS, native libraries, JavaScript code and AngularJS skills are the other things that we make available in NativeScript).

So why is this a big deal and why it is a best practice to use a font instead of an image file to display an icon?

What is Icon Font?

To start, let’s define what is an icon font? Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS the same way you style regular text which has made them a popular choice on the web.
As an example, let’s examine the Material Design Iconic Font which is very useful if you want to use any of the Google material design icons.
A good icon font comes with a “cheatsheet” - a list of all the icons available together with their text references. Here is how our cheatsheet looks like:

What is the benefit of using icon font?

There are many benefits of using an icon font instead of an image. For me the most important is that because font icons are vector-based you don’t need to deal with different images for the different resolutions. You can just increase or decrease the font-size property and you will see the icon rendered beautifully on the new resolution. This is a huge benefit if you are targeting many screen sizes. Instead of having tons of icons, now you just have a one font file to look after.
The second reason is the performance. If you are showing a list of items and each of those item contains an icon, then instead of reading the image file, decoding it and displaying it on the screen, there is only a single operation to render the icon glyph as part of the text rendering.
The third reason is that you can now use these icons inline as a part of the text. A very common case is to need a button that has an icon and a text displayed into it.
The fourth reason is theming. If you want to change the color of the icon, you just need to set the color CSS property and that’s it. You have an icon with a different color. No need to open an image editor, cut a new image, place it inside the app, and … repeat for each resolution :).
The last reason is the smaller app size. If you have a medium or big-sized app, you will cut significantly the size of the app. The icon fonts are vector-based, not bitmap-based and that is reason the size of these “icons” to be very small. In our example there are hundreds (if not thousands) of icons and the size of the icon is less than 100k.

How to use it?

First step - get the ".ttf" file that is part of the font distribution and place it inside the “fonts” folder inside your app.

2. The second step - define a css class that specifies the font-family declaration:

.material-icon {

font-family: 'Material-Design-Iconic-Font';

}

3. Last step - use the CSS declaration everywhere in your app:

It is so simple, isn’t it?

Wait? What does the  means? Good question!

Let's get back to the cheatsheet:

As you can see here, next to each icon there is a reference number. In order to show the icon in the app, you should write this reference number in-line with the next. That is why the cheatsheets are so important. There is no other way to know how to specify an icon. As an example, if you want to use the bicycle icon in your app, you need to simple write this:

If you want to use the note icon, you guessed right, you just need to use the note icon reference number. <Button text=” Music” class=”material-icon”/>

You can use font icons with any element that have a font-family property. This means virtually any element that has a “text” property in NativeScript - Label, ActionBar, Button, Span and many others.

Here is how the example above renders in the app:

If you want to use the icons from JavaScript code you can use this code:

label.text = "\uf10f Music"

Basically you are replacing the "&#x" with "\u" and skipping the ";" at the end.
You can also use multiple icons as a part of one text block, but you probably should consult your designer before going down that route :).
I hope believe you will find this feature much useful to your apps. If you have any questions, please use the comments section below.

Tell your friends about this on twitter and share the news.