Color of icon when changing color of button

I have a button with an icon. I want to have the button in gray so I change the chromeColor but when I do that, the icon became darker.

On the left the button without changing the color, on the right, the gray button with and darker icon.

How can I have a gray button without changing the icon color ?

You can do this by modifying the skin class and adding "iconDisplay" to the exclusion array. At the end the line should look like this:

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

Hope this helps.

What SDK are you using? If you are in the 4.* range, then I think you should look at applying a custom skin on the button.

As said, it can be done through a custom skin. To create a custom skin with flash builder:

1. Create a new package "skins" inside "src".
2. Right click on skins and click on "New > MXML Skin".
3. Give it a name, for instance "CustomButtonSkin".
4. Pick the host component "spark.components.Button".
5. Create as copy of "spark.skins.spark.ButtonSkin".

6. Add "iconDisplay" to the "exclusions:Array".

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

7. Apply the new custom skin to your buttons.

   <s:Button id="MyCustomButton" skinClass="skins.CustomButtonSkin" icon="@Embed(source='...')" />