I’ve noticed this behavior before, but in previous projects it wasn’t a really big deal…

Scenario: Using Flex 4.5 and the default Spark theme, you provide a button with both a “chromeColor” setting and assign it an Icon. The Icon is rendered almost transparent and looks nothing like what you’ve exported from Photoshop, Fireworks, or whatever. The image below demonstrates both how the icon should appear (top) and how it appears by default (bottom).

Good Icon / Bad Icon

I’ve mentioned that I’ve encountered this before. Well… for the current project, it really is a big deal. I needed to find a solution to this and the answer is not at all readily available. Since the ability to include an icon was not included in the initial Spark release, performing a search on Google will mostly pull up workarounds for this. Now that icons are officially supported in Spark Button components, this is not a big deal… yet we still have the problem of the icon showing up all funky.

I reached out on Twitter, thinking there must be someone out there that had encountered this. Dan Florio pointed out that it was likely the chromeColor style setting that was causing the problem. After giving this a good look, I did verify that the icon seemed to be inheriting styles off of the chomeColor even though the Label element within the Button was not. Weird… but it definitely gave me something to work on.

Anyhow. Here is what I found that does fix this problem.

1. Create a new Flex application with the default Spark theme.
2. Add a Button with an icon defined, as well as the chromeColor attribute:

   <s:Button label="BOOKMARK" chromeColor="#000000"  icon="@Embed('mini_bookmark.png')"/>

   This will render the icon barely visible.

3. Now you must create a new Skin class based off of spark.skins.spark.ButtonSkin and assign this to the skinClass attribute of the Button
4. Within this class (around line 43) is the following declaration:

   static private const exclusions:Array = ["labelDisplay"];

5. The icon in a Spark Button has the ID of iconDisplay. We will add this to the exclusions Array:

   static private const exclusions:Array = ["labelDisplay", "iconDisplay"];

6. Presto! Everything looks classy!

Hopefully those reading this did not need to spend over an hour wading through the default Spark component and skin declarations to locate this :)