In Sencha Touch 2.2 instead of using icons with the -webkit-mask trick, Touch is moving to a more cross-browser solution with icon fonts. You can read more about this at Steve Drucker blog Changes to Sencha Touch 2.2 Theming Part 1: Using Iconography.

As Steve mentions on his blog, Touch SDK ships with the Pictos Font, and it already loads some basic icons for you to use directly on buttons with iconCls.

{
 xtype: 'button',
 iconCls: 'home'
}

If you want to define more icons from the same Pictos fonts, you just have to use the mixin icon():

@include icon('network');

{
 xtype: 'button',
 iconCls: 'network',
 iconAlign: 'top',
 text: 'Net'
}

Touch Theming Layer already has a big object on SASS mapping keys into characters. So when you inform the key “network”, the theme knows that it has to use the key “J”.

Adding Custom Icons

To add more icons you’ll need to generate your own font! You might be question yourself – How do I create a new font? Sounds complicated but it’s fairly easy.

There’s a few tools, but my favorite is IcoMoon. With this tool you can select from dozens of fonts and create your own font package, or even import your own SVG vectors.

All you need to do is select your icons, click generate font, and download!

Select your icons…

..and download the font!

After you have your font, it’s time to add to your project. Add the font into {touch_app}/resources/fonts/, and add this path to your config.rb:

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
fonts_path = File.join(dir, "..", "fonts")

Hint: Because we’re defining the fonts_path I had an error like “Pictos fonts not found”. It’s also good to copy the pictos folder from touch/resources/themes/fonts to this new fonts/ directory.

For the last step you just need to include the font and use the icons on your app.scss, like this:

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

@include icon("menu"  , "\e009");
@include icon("search", "\e000");
@include icon("star"  , "\e001");

Updated June/5: In 2.2.1 you have to specify your font along with icon() mixin. Otherwise it will fallback to ‘Pictos’

@include icon("menu"  , "\e009", "SenchaConIcons");
@include icon("search", "\e000", "SenchaConIcons");
@include icon("star"  , "\e001", "SenchaConIcons");

Recap

• Use a tool to pick icons and generate the font (IcoMoon, Fontello)
• Add font into new directory {your_app}/resources/fonts
• Copy Pictos font from Touch directory to the same {your_app}/resources/fonts to avoid errors
• Add fonts_path into config.rb so Compass finds your font
• Import the font icon in your app.scss

What about PNG?

PNG is bitmap based, while Fonts are vectorial based. The above mentioned tools provide hundreds of icons, so it’s pretty easy to find an existent font icon pre-built. If that’s not the case, you can convert PNG to SVG and then import into IcoMoon. There are tools for that, like VectorMagic, Online Image Converter or Inkscape. I haven’t try any of these but If you have, please let us know via comment.