Axway AMPLIFY Blogs

The Leading Resource for All THings Mobile & Data Integration

Cool Technique to Use Vector Icons

21 Flares 21 Flares ×

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) 3*7*2 (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.

21 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 21 Email -- 21 Flares ×

6 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Gregor Munro

    Rather than remembering the ‘\ue7fb’ etc, I tend to create an icons.js file in app/lib as follows:
    “`
    module.exports = {
    “adjust” : “\uf042”,
    “adn” : “\uf170”,
    “alignCenter” : “\uf037”,
    “align-center” : “\uf037”,
    “alignJustify” : “\uf039”,
    “align-justify” : “\uf039”,
    “alignLeft” : “\uf036”,
    “align-left” : “\uf036”,
    “alignRight” : “\uf038”,
    “align-right” : “\uf038”,
    “amazon” : “\uf270”,
    “ambulance” : “\uf0f9”,
    “anchor” : “\uf13d”,
    “android” : “\uf17b”,
    “angellist” : “\uf209”,
    “`
    I can then load these globally by modifying my alloy.js to include
    “`
    // Load FontAwesome icon chars into global for use in TSS
    Alloy.Globals.icons = require(‘icons’);
    “`
    and in your TSS files
    ““
    “.toggleBtnTracking”: {
    “title”: Alloy.Globals.icons.stopCircle
    },
    ““

  2. Thank you for this post!

    I made one to create your own font icon on TiDev: http://www.tidev.io/2014/03/25/create-an-icon-font-with-icomoon/

    Since 2014, there is a lot of websites for finding the perfect icons:
    – Icon8: https://icons8.com/
    – FlatIcon: https://www.flaticon.com/
    – The Noun Project: https://thenounproject.com/
    – Free Icon sets: https://www.pinterest.co.uk/timoa/icons-free/

    • roelandp

      Yes, I also use Icomoon to create lightweight vector icon fonts for use in titanium apps. I always just ABCDEFG those icon letters and use icomoon as a reference.

  3. Great article to share Prashant.

    However, for anyone out there using png images, you can use “tintColor” to color the images to your liking, without the need to have multiple versions of the same image, if the image is used within an ImageView.

  4. More over – you can use service like http://fontastic.me то create you own fonts from svg icons.

  5. Hi!
    Can I add icon Font inside Tab Bar Icon?

    Thanks!

computer and tablet showing Appcelerator software
Start free, grow from there.
21 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 21 Email -- 21 Flares ×