Flex Examples

There are two general methods for embedding an icon into a Button control. The first method involves creating a variable in the Flex application, and using the [Bindable] and [Embed] meta data. You specify the path to the icon in the source parameter of the Embed meta data and then to use the icon in a Button, you use data binding, which in this case would look like icon="{Icon}". The second method, embeds the icon inline in the Button tag itself, by using @Embed() and specifying the path to the image file as a parameter. See the full code after the jump.

Download source (ZIP, 2K) | View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/21/setting-an-icon-in-a-button-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        backgroundColor="white">                            

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/bug.png")]
            private var Icon:Class;
        ]]>
    </mx:Script>                            

    <mx:Button label="[Embed(source='assets/bug.png')]"
            icon="{Icon}" />
    <mx:Button label="@Embed('assets/bug.png')"
            icon="@Embed('assets/bug.png')" />                            

</mx:Application>

View source enabled in the following example.