Flex 4 IconButton

Yesterday, Andrew Westberg posted the following comment on my post about creating a custom Flex 4 component.

I’ve heard some complaints that Flex 4 is much more verbose for doing what was simple in 3. One example is adding an icon to a button. Thoughts on that?

At first, I misunderstood him and thought he was saying he had heard it was more difficult to add a second icon to a button with Flex 4 than Flex 3, which it’s not.  I replied to him directly with an example of just how easy it is, and also sent him here to show him the cool button Juan built.  Turns out, what he was saying is that it’s sorta a pain in the ass to add even the first icon, which it is compared to Flex 3 where the Button has built in support for an icon.

Consider the buttons in the image below.  They have the same background an mouse over/down treatments, but different icons.  Straight out of the Flex box, you’d have to create two different skins to have these two buttons with different icons (I think.)

To work around this I created a simple extension of the Spark Button and gave it an icon property. In the extension I defined an iconElement as a skin part, which, when added is passed the value of the icon property. Now you can create two instances of the same button with the same skin and specify a different icon for each one.

This would have been really easy it I hadn’t run into this SDK bug. Fortunately, after copying the mxmlc.jar into my $FLEX_HOME/lib directory and cleaning the project, it worked as expected.

View Example (view source enabled)

This entry was posted in Flex 4, Spark. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.


  1. neuston
    Posted March 10, 2010 at 8:02 pm | Permalink

    very good and professional approach! Thank you very much~ It solved the problem which has been annoying me for weeks.

  2. fredo
    Posted May 28, 2010 at 11:02 am | Permalink

    really? they removed the ability to add an icon to a button? wtf?

    btw the posted source gives these errors in FB4:
    Could not resolve to a component implementation. IconButtonDemo
    unable to open ‘/Development/Workspaces/Work10/IconButtonDemo/libs’

  3. Christian
    Posted June 9, 2010 at 8:38 am | Permalink

    Hey, that helped a lot. I also ran into that SDK bug, though. and i couldn’t fix it. I downloaded mxmlc.jar, put it in the …\Adobe Flash Builder 4\sdks\4.0.0\lib folder, restarted flash builder and cleaned the project. I ended up with many compiling errors. nothing really worked.
    in that lib folder are several mxmlc_*.jar (e.g. mxmlc_de.jar) files and one mxmlc.jar.
    Was it the right folder… the right file to be replaced.
    Cheers, Christian

  4. Hari
    Posted June 23, 2010 at 3:15 am | Permalink

    I could not see the label field in the button when i use the component.

  5. Posted August 4, 2010 at 6:50 am | Permalink

    Came across this as I’m throwing an IconButton together at the mo.

    I reckon your icon prop should be a style, enabling the definting of it in CSS with states supported.

  6. Posted November 2, 2010 at 12:08 pm | Permalink

    Very nice, I was having the same problem that you had. Saved me a great time ;)

  7. Chris
    Posted December 14, 2010 at 5:09 am | Permalink


    I tried ur sample by changing to , but I am not able to get the text over the button. Can u plz help.


  8. Chris
    Posted December 14, 2010 at 5:12 am | Permalink


    I tried ur sample by changing s:SimpleText by s:Label , but I am not able to get the text over the button. Can u plz help.


  9. Anurag Chouksey
    Posted March 15, 2011 at 11:13 pm | Permalink

    Really nice example and the right way of doing . Thanks.

  10. Mark
    Posted June 8, 2011 at 12:11 pm | Permalink

    I did have same problem as CHRIS-. I changed s:SimpleText by s:Label and no text is shown.

4 Trackbacks

  1. [...] examples of Spark Icon Buttons have shown up in the past few days. Andy mcintosh did an example here, Rob another one here, I did one myself here. While all were using a slightly different approach [...]

  2. By Flex 4 skinning ignores developer needs | on August 3, 2009 at 12:56 pm

    [...] noticed a number of people here (Andy McIntosh), and here (Andy Hulstkamp) working with button icon skins. The main reason for this is that Adobe [...]

  3. [...] Then we have three choices for the PictureButtonSkin: a) create a brand new skin (this had been done before) b) massage the clone of spark.skins.spark.ButtonSkin c) build a descendant (in OOP terms) of the [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>