Setting a custom icon on the MX Button control in Flex

The following example shows how you can use the MX TitleWindow container’s close button for an MX Button control icon and skin by setting the skinClass style.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/08/setting-a-custom-icon-on-the-mx-button-control-in-flex/ -->
<mx:Application name="MX_Button_upIcon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .titleWindowIconAsIcon {
            upIcon: Embed("Assets.swf#CloseButtonUp");
            overIcon: Embed("Assets.swf#CloseButtonOver");
            downIcon: Embed("Assets.swf#CloseButtonDown");
            disabledIcon: Embed("Assets.swf#CloseButtonDisabled");
        }
 
        .titleWindowIconAsSkin {
            upSkin: Embed("Assets.swf#CloseButtonUp");
            overSkin: Embed("Assets.swf#CloseButtonOver");
            downSkin: Embed("Assets.swf#CloseButtonDown");
            disabledSkin: Embed("Assets.swf#CloseButtonDisabled");
        }
    </mx:Style>
 
    <mx:Button styleName="titleWindowIconAsIcon" label="Button" />
    <mx:Button styleName="titleWindowIconAsSkin" />
 
</mx:Application>

One thought on “Setting a custom icon on the MX Button control in Flex

Comments are closed.