View Full Version : control icon color

20 Jan 2011, 7:45 AM
When I create button:

xtype: 'button',
iconCls: 'arrow_left',
iconMask: true,
width: 64,
height: 22,

icon picture will be black.

Any idea how to change the color?

20 Dec 2011, 1:32 PM
The icon mask matches the color of the button font. You can override the style this way:

.myIconStyle .x-icon-mask{background:green !important;}

Of course gradients work too:

.myIconStyle .x-icon-mask{
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#22AB07), to(#1B6B1B), color-stop(.3,#A9D6AE)) !important;

Button Code looks like this:

text: 'Ready',
iconMask: true,
iconCls: 'check_black2',
ui: 'normal'

Now you can change the color of the icon mask using this technique:


My example is set up to load the default icon mask style and then when validation is true it changes the check mark to green.