Setting the icon on a LinkButton control in Flex

The following example shows how you can embed an icon in the Flex LinkButton control by setting the icon style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/03/setting-the-icon-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_icon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            icon="@Embed('assets/LinkButton.png')" />

</mx:Application>

View source is enabled in the following example.

You can also embed the icon in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/03/setting-the-icon-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_icon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        LinkButton {
            icon: Embed("assets/LinkButton.png");
        }
    </mx:Style>

    <mx:LinkButton id="linkButton"
            label="LinkButton" />

</mx:Application>

Or, you can embed the icon in ActionScript and use data binding to bind the icon to the LinkButton control, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/03/setting-the-icon-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_icon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Embed("assets/LinkButton.png")]
            private const linkButtonIcon:Class;
        ]]>
    </mx:Script>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            icon="{linkButtonIcon}" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/03/setting-the-icon-on-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_icon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

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

            [Embed("assets/LinkButton.png")]
            private const linkButtonIcon:Class;

            private var linkButton:LinkButton;

            private function init():void {
                linkButton = new LinkButton();
                linkButton.label = "LinkButton";
                linkButton.setStyle("icon", linkButtonIcon);
                addChild(linkButton);
            }
        ]]>
    </mx:Script>

</mx:Application>

Tagged as: icon