Trouble using iconCls on a button

[WagsMax]

I can't seem to figure out what to put into the iconCls field for a button to get the icon to display. For example, I just want to display the 'settings' icon on a button. When I put 'settings' into the iconCls field I get a large empty button. Any ideas?

[CaliLuke]

select "iconMask = true".

It's not a great user experience for now but it will get better.

[WagsMax]

There does not seem to be a property named iconMask for a button in the Designer??

[CaliLuke]

that's for Sencha Touch, I should have specified it.

[WagsMax]

How do you get an icon to display in Sencha Touch using Designer?

[aconran]

WagsMax - Are you talking about the custom iconCls's defined in your own custom css? These currently don't show up in the design view as we don't load your custom css in the design mode. You can configure them and see them in the deployed application.

[erich.oliphant]

Does this also apply to the hundreds of other Sencha Touch icons (in the pictos dir of the distribution) that don't show up in the property sheet by default? I'd like to use some of them but they don't show up as options. Is using their name adequate?

[aconran]

There are only a handful of iconCls's that we generate by default. These are the ones that are included in the dropdown.

If you take a look at the scss within the SDK you'll see how those iconCls's are generated. Look for the pictos-iconmask mixin. For example, you could generate an additional iconCls for tv by doing the following.

@include pictos-iconmask('tv')

The SDK takes this approach so as not to bloat your css file with unnecessary images.