Adobe Flex Transparency not working on Button icon

Question

I am fairly inexperienced with Flex, but my googling has retrieved nothing to suggest this is an obvious question.

I have an mx:Button with an Icon on it that is a png file with a transparent background, as below, however the transparency is not working, and the icon is painted with a white background.

<mx:Button label="Button" icon="@Embed(source='images/clearTracks.png')"/>

I have seen how to use a ByteArrayImage to get a transparency working on an image, but this technique doesn't appear available for a button's icon property.

Answer 1

There's an existing bug in Adobe's Jira for this issue: http://bugs.adobe.com/jira/browse/SDK-8877.

Flex does support PNG transparency, but from what I've read, it decodes some pngs incorrectly when embedding them, causing the weird background issue you're seeing. Can you try creating the graphic again from photoshop?

Answer 2

use skin and overSkin styles rather than the icon property. Its working with transparent images for me.