API Development

Cool Technique to Use Vector Icons

| Prashant Saini |

This post was originally published on Medium by Prashant Saini, a mobile developer with Ushyaku Software Solutions LLP who loves creating high performing mobile apps using Axway Titanium.
You can follow him on Medium or Twitter.

Today, I am going to explain an amazing trend in UI development, which is still not known 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) 372 (black, grey) = 42 icons.

I know it’s tedious to maintain a large number of icons to create this drawer menu, & obviously more-so 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’ve 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.

How to Implement in 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?

That’s all friends! Hope it helped you to learn this great technique, which is super efficient, helps maintain a codebase, reduces app size – and of course lots of headaches when you suddenly miss icons.