Setting the icon on a LinkButton control in Flex

by Peter deHaan on September 3, 2008

in LinkButton

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>

{ 1 comment… read it below or add one }

1 Michael February 20, 2009 at 2:47 pm

What are the pros/cons on each various method?

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: