Using Custom Icons in a Sencha Touch Application

Sencha Touch uses fonts to render the applications icons which allows for improved performance through lower memory consumption. By default, there’s a wide array of icons we can access – for a list of what is available you can check out a reference table here. Before you’ll be able to use some icons however, you’ll have to reference them in your app.scss file (found in ‘resources/sass’). You can do this by placing the following code in the file:

@include icon('team');

Make sure the .scss file is compiled afterwards by using ‘compass compile’, ‘compass watch’ or through some other means. Once your new css file has been generated you can use the icon within your application by referencing it like this:

{
    xtype: 'button',
    iconCls: 'refresh',
    ui: 'plain'
}

Note: The inclusion of the plain option is not necessary, but this allows you to remove the styling of the button and just show the icon which, in general, I like better.

Not satisfied with the default icons?

The icons that are included out of the box will usually be enough to cover most situations, but of course there are going to be times where you want to use an icon that isn’t included. In order to use a new icon, you’ll need to generate your own font file. The easiest way to do this is to use IcoMoon, this allows you to select from a wide range of icons and generate a font file including only those. Once you have downloaded the files, place them into the ‘resources/sass/stylesheets/fonts’ folder. Then add the following code to your app.scss file to include the new font file:

@include icon-font('extended-icons', inline-font-files(
  'extended-icons/extended-icons.woff', woff,
  'extended-icons/extended-icons.ttf', truetype,
  'extended-icons/extended-icons.svg', svg
));

Again, compile the .scss file. Once your css file has finished building you can include the new icons in much the same way as the default icons:

{
    xtype: 'button',
    iconCls: 'headphones',
    ui: 'plain'
}

You should be able to reference any icons you included in the package in the same way. That’s about it! If you’re unsure about anything in this tutorial feel free to leave a comment below. I’ve also generated a new Sencha Touch application with some custom icons that you can take a look at on GitHub.