#9 Adding custom embedded (inline) icons

Sencha Touch comes bundled with a bunch of icons (329 as of 1.0.1a). They are a bit hidden. You can find them in the distribution package at:
resources/themes/images/default/pictos

Using default icons

To use one of those icons e.g. in a tab or button (by specifying iconCls: 'some_icon'), just include the following line in your Sass file:

@include pictos-iconmask('some_icon');

some_icon has to be the file name of the icon image you find in the pictos folder.

This method isn't just adding the icons via an url such as url(/resources/themes/images/default/pictos/some_icon.png). It's embedding them right into your CSS via a data url. This guarantees your icons to be shown right when your app is rendered, instead of loading the icon after a delay.

So your CSS will look something like:

.x-tab img.some_icon, .x-button img.x-icon-mask.some_icon {
  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAIgUlEQVRoBc2aWaxdUxjHezpqaVQprQ5JuakOqal');
}

Adding custom icons

Sometimes you want to add custom icons the same way though. You could add the image file into the pictos folder and use Sencha Touch's pictos-iconmask method as well. Though, it's probably better to separate your custom files from the Sencha Touch files for better organization and especially for avoiding deleting them after the next upgrade of your Sencha Touch resource files.

Here's the approach I'm taking:

I use the build-in Compass method inline-image which converts your image to a base64 inline image in my custom icon mask mixin:

@mixin custom-iconmask($name) {
  .x-tab img.#{$name}, .x-button img.x-icon-mask.#{$name} {
    -webkit-mask-image: inline-image('icons/' + $name + '.png');
  }
}

Then I just include a custom icon by

@include custom-iconmask('custom_icon');

Note that you can adjust the exact path and extension yourself. In my case, the icon has to be a png in images/icons/custom_icon.png. inline-image is assuming your images are in the images folder by default.

Not using Compass

Of course, you can also just paste the base64 string of your custom icon into your CSS or SASS code.

There are a few websites and offline tools out there that convert your images to base64 strings as used by the data url. None of the websites or tools I used have been working great for me though, therefore don't really deserve a mention. ;)

Coincidentally, Mitchell Simoens (Sencha's newest hire) released today a very handy Base64 encoder built with Ext Core and the HTML5 File API:
http://www.sencha.com/forum/showthread.php?126882-Base64-Encoder
Check it out, extremely easy and fast to use. :)

That's all.