View Full Version : [OPEN] Howto: use custom pictos with Sencha Touch

27 Oct 2012, 10:20 AM
This was a pain, and I drew from Steffen Hiller's blog post on this (http://www.senchatouchbits.com/9/adding-custom-embedded-inline-icons.html). Follow this procedure to use your own icon masks without having to add them to the SDK's pictos directory and keep everything CMD-friendly:

1) Add images_path setting after images_dir in MyApp/resources/sass/config.rb

# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
images_path = images_dir
output_style = :compressed
environment = :production

2) Define this new mixin that is a modified copy of pictos-iconmask -- I stashed mine in MyApp/resources/sass/mixins/_custom-iconmask.scss and then @import'd it, but you could drop it right in app.scss for simplicity

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

3) Place your icons in MyApp/resources/images/icons/*.png

4) Use custom-iconmask just like you would use pictos-iconmask:

@include custom-iconmask('myapp-logo');

Sencha - please preconfigure compass for us so that inline-image() pulls from MyApp/resources/images out-of-the-box

28 Oct 2012, 4:56 PM
Thanks for the report! I have opened a bug in our bug tracker.

4 Dec 2012, 2:04 PM
Make sure to add

-webkit-mask-repeat: no-repeat;

..to _custom-iconmask.scss

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

if you don't want the icon to repeat vertically.

9 Jan 2013, 10:38 AM
I'm not a saas guy and I would like to ask if is it possible to have directories handled by this mixing/function?

For example, assuming the following directory structure


I'd like to have the following calls working:

@include custom-iconmask('myapp-logo');
@include custom-iconmask('icons_white/myapp-logo');
@include custom-iconmask('icons_gray/mayapp-logo');

And then in my code to just reference it as

iconCls: 'myapp-logo';
iconCls: 'icons_white/myapp-logo';
iconCls: 'icons_gray/mayapp-logo';


8 Apr 2013, 2:22 AM
Still not possible to use inline-image with sencha cmd

Regards arion.

9 Nov 2013, 12:44 PM
I lost a few minutes finding out these three facts. Thought I'd be helping other begginers by sharing this here.

- Since the icon is used as a mask, remember to set the container's background-color to something different from the parent's background-color.

- Size can be importante here. The property is -webkit-mask-size. Most of the times, the icon will be bigger than its container. In Sencha Touch 2.3.0, all Pictos Icons are 60x60.

- Last but not least, -webkit-mask-position. I've set it as default to:

-webkit-mask-position; center center.