Cool technique to use vector icons using iconic font files.

This tutorial is helpful to all developers who deal with UI like Titanium, Android, iOS, Xamarin, PhoneGap/Cordova, or even Web UI devs.

Today we are going to see an amazing trend in UI development which is still unseen even by many experienced developers. Let’s remove your old un-scalable icons & embrace this new technique to create vector icons.

Take a look at this drawer menu image, it has 7 icons (top to bottom menu) & second menu (Primary) has its icon colour as BLACK.

Now count the total number of icons it will take to build this menu considering all resolutions from ldpi to xxxhdpi (6) = 7*6 = 42 icons. But we have to use 2 colours: GREY for unselected & BLACK for selected menu. So total icons will be = 84 icons. OMG!

For iOS it will be (1x, 2x, 3x) 3*7*2 (black, grey)= 42 icons.

I know you have started feeling tedious to maintain large number of icons to create this drawer menu, & obviously more as it’s not a complete menu & what if you need any other colour & your app gets heavy in size due to hundreds of icons used.

Don’t worry, I got you covered :) Let’s dive into the amazing solution which requires simple font file(s) to create available icons for any resolution type in 16.7 million colours. Yeah, you just saved your Photoshop designer.

We are going to use 2 iconic-font files: FontAwesome & Google Material Icons which provides tons of useful icons.

Titanium :

Download complete working app source code here: Titanium Sample App

1. Put respective font file in app > assets > fonts folder. Take care of naming conventions to be used for custom font files for iOS & Android.
2. Create a common class in app.tss with specified font-family:

".fa" : {font : { fontFamily : 'FontAwesome' }}
".ma" : {font : { fontFamily : 'Material Icons' }}

3. Create Label or Button or TexField or any font element (note, we can’t use ImageView here as we are dealing with fonts). Here we are using this unicode Social Icon (\ue7fb) to create icon.

<Button class='ma' title='\ue7fb' color='#69cee5' />
<Label class='ma' text='\ue7fb' color='#69cee5' />

See, how simple it was to create that Social icon in any colour, in any size you want.

Native Android :

It is not as simple as Titanium one, so I would suggest to take a look at links in the end of this blog which contains fully working sample app with all required files & a .JAR file to use in any project.

This is how Android sample app looks like. All icons in different elements (TextView, Button, MenuItem) with different colours & sizes are created using font files.

Native iOS :

Coming soon… On the way… :)

Github: Titanium sample app link

Github: Native Android sample app link

That’s all friends! Hope it helped you to learn this great technique which is super efficient & help maintain codebase & reduce app size & of course lot of headaches when you suddenly miss icons.