Change mx:Button component’s icon at runtime

This solution isn’t about using an external SWF to use assets embedded in it as icons. This is about using an image file sitting on the filesystem or on a web server. Flex is very rigid about the use of embedded assets converted to a “Class” when assigning icons to icon based controls such as buttons and accordion. This greatly limits the possibilities of changing visual elements on the fly at runtime.

Ben Stucki has come up with a cool IconUtility class that lets you overcome this limitation. I just used it in a project and it works great. The MXML example can be found on his blog entry on IconUtility class. The source code can be found there as well.

Just one quirk when suing it through code though, the icons don’t end up in the center of the button when the buttons are created through ActionScript. No worries though because by forcing the height and width of the icon you can get around this problem. The following code demonstrates the use of the class in ActionScript.


import com.benstucki.utilities.IconUtility;
private var myButton:Button = new Button();
myButton.width = 100;
myButton.height = 75;
myButton.icon = IconUtility.getClass( myButton, 'http://www.yourdomain.com/images/test.jpg', 48, 48);

Note that the first argument to the static getClass method of the IconUtility class is the instance name of the button on which the icon needs to be placed.

TADA: yet another flex problem revealed and thank heavens FIXED this time.