Setting a Button control’s icon to an asset from a SWF file in Flex

The following example shows how you can set a Flex Button control’s icon style to an asset from a SWF file using MXML or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Button label="Bullet Add"
            icon="@Embed(source='icons.swf', symbol='bullet_add')" />
    <mx:Button label="Bullet Delete"
            icon="@Embed(source='icons.swf', symbol='bullet_delete')" />
    <mx:Button label="Bullet Star"
            icon="@Embed(source='icons.swf', symbol='bullet_star')" />

</mx:Application>

View source is enabled in the following example.

You can also use the shortcut embed notation (“source#symbol”), as shown in the following snippet:

<mx:Button label="Bullet Add"
        icon="@Embed('icons.swf#bullet_add')" />
<mx:Button label="Bullet Delete"
        icon="@Embed('icons.swf#bullet_delete')" />
<mx:Button label="Bullet Star"
        icon="@Embed('icons.swf#bullet_star')" />

You can also use [Embed] metadata, and then set the icon using databinding, as shown in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("icons.swf#bullet_add")]
            public var bulletAddIcon:Class;

            [Bindable]
            [Embed("icons.swf#bullet_delete")]
            public var bulletDeleteIcon:Class;

            [Bindable]
            [Embed("icons.swf#bullet_star")]
            public var bulletStarIcon:Class;
        ]]>
    </mx:Script>

    <mx:Button label="Bullet Add" icon="{bulletAddIcon}" />
    <mx:Button label="Bullet Delete" icon="{bulletDeleteIcon}" />
    <mx:Button label="Bullet Star" icon="{bulletStarIcon}" />

</mx:Application>

View source is enabled in the following example.

And finally, if you wanted to create the Button objects dynamically, you could use something like the following code:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Button;

            [Embed("icons.swf#bullet_add")]
            public var bulletAddIcon:Class;

            [Embed("icons.swf#bullet_delete")]
            public var bulletDeleteIcon:Class;

            [Embed("icons.swf#bullet_star")]
            public var bulletStarIcon:Class;

            private var addButton:Button;
            private var deleteButton:Button;
            private var starButton:Button;

            private function init():void {
                // Add
                addButton = new Button();
                addButton.label = "Bullet Add";
                addButton.setStyle("icon", bulletAddIcon);
                addChild(addButton);
                // Delete
                deleteButton = new Button();
                deleteButton.label = "Bullet Delete";
                deleteButton.setStyle("icon", bulletDeleteIcon);
                addChild(deleteButton);
                // Star
                starButton = new Button();
                starButton.label = "Bullet Star";
                starButton.setStyle("icon", bulletStarIcon);
                addChild(starButton);
            }
        ]]>
    </mx:Script>

</mx:Application>

View source is enabled in the following example.