Here’s a Button sub-class that will allow you to tint your Button icons when you interact with them. The tinting is all controlled via CSS. The example below also uses a Degrafa stateful skin (see previous article here).

The Button component creates an icon for each state even if you only have one image and the icons are added to the Buttons Display list as required. As you can see in the sub-class below the tinting of the icons is handled in the ‘added’ event handler. The Button component has set names for each of the icons it creates for each state. You can use the mx_internal namespace to access the classes CurrentIcon property but this is dodgy and the method shown works well and is future-proof. Well, saying that this entire example can probably be done much easier using FXG in Flex 4 but for all of you still battling it out in Flex 3 this technique should save you the trouble of saving out lots of different images for all your button states so long as your icon is a flat single-coloured symbol.

… and here’s the Application class with the styles for the icon tinting:

you don’t need to use Degrafa to do the skinning of the button and the icon tinting will work without any skins but I threw one in just because I’m enjoying using them at the moment. Here it is :

Download the Source

UPDATE: In the Source doc generated by Flex the Metadata for the Styles seems to have been written incorrectly. The correct way to assign custom style metadata to your class is like so …

[Style(name="iconUpTint", type="uint", format="Color", inherit="yes")]

Not sure why the doc was mis-read.