May 26th, 2012

Adding an Icon inside a Button Component

More articles by »
Written by: Nouman Naveed
Tags: ,
adobe flex spark iconbutton

There are many times while doing your project development when you want to display an icon inside your cute Spark Button. To achieve this requirement we need to extend s:Button with an ActionScript class and add the necessary properties and skin parts.

Skin parts are referenced in a component using the [SkinPart] metadata tag. This tag has an option required property that specifies whether the skin part is optional and is set to true by default. The following components extends s:Button using ActionScript and adds two additional properties: icon, which is an instance of mx:Image, and source, a String.

Icon is defined as an optional skin part and will be added to the skin class further on in the recipe. Because, in the lifecycle of the component, the source property can be defined before icon has been added to the displayList of the button, getter and setter functions are used for the source property and the value is only assigned to icon if it is defined.

The Protected function partAdded() is also overridden to assign the source property to icon when it is added to the displayList. Her’s the code:

package components
import mx.controls.Image;

import spark.components.Button;

public class IconButton extends Button
protected var _source:String;
public var icon:Image;

public function get source():String
return _source;

public function set source(val:String):void{

override protected function partAdded(partName:String, instance:Object):void{

The skin class contains a simple rectangle, an instance of s:Label, and an instance of mx:Image whith an id of icon. It is important to remember that the property names of the skin parts declared in the host component must match the ids of the corresponding components in the skin class:

<?xml version=”1.0″ encoding=”utf-8″?>
<s:SparkSkin xmlns:fx=”http://ns.adobe.com/mxml/2009″
minWidth=”21″ minHeight=”30″
xmlsns:mx=”library://ns.adobe.com/flex/mx” xmlns:mx=”library://ns.adobe.com/flex/mx”>


<!– states –>
<s:State name=”up” />
<s:State name=”over” />
<s:State name=”down” />
<s:State name=”disabled” />

<s:SolidColor id=”fillColor” color=”#FFFFFF” color.over=”#DDDDDD”/>
<s:SolidColorStroke id=”strokeColor” color=”#333333″ color.over=”#111111″ weight=”2″/>

<s:Rect top=”0″ left=”0″ bottom=”0″ right=”0″ radiusX=”15″ radiusY=”15″ fill=”{fillColor}” stroke=”{strokeColor}”/>

<s:Group left=”8″ right=”25″ top=”2″ bottom=”2″>
<s:HorizontalLayout verticalAlign=”middle” gap=”8″/>

<mx:Image id=”icon” maxHeight=”24″/>
<s:Label id=”labelDisplay” left=”25″ right=”25″ top=”9″ bottom=”6″ color=”{strokeColor.color}” fontWeight=”bold”/>


About the Author

Nouman Naveed
My name is Mohammed Nouman Naveed. I work and play with Flash Platform technologies and has experience of 11 years. Consulting and Training is part of my job. I am Adobe Certified Instructor, Adobe User Group Manager, Adobe Certified Expert and Adobe Community Champion.



Apache Flex 4.10.0 Available

Here comes Apache Flex 4.10. This project, the all-volunteer group of developers, and stakeholders in the development framework, today announced the release of Apache Flex 4.10.0. This release makes some important improvements ...
by Nouman Naveed


Adobe Flash Builder 4.7 Beta Available !

Recently Adobe released Adobe Flash Builder 4.7 beta which will support Adobe Flash 11.4 and Adobe AIR 3.4. It will also support Apache Flex 4.8 release. This version has improved workflow for iOS application development with s...
by Nouman Naveed


Custom DataTip Renderers for ColumnChart

Flex provides many types of charts which allow raw data to show in meaningful format. ColumnChart component is one of the commonly used chart component in many flex applications. Customization of column chart datatip box is not...
by Nouman Naveed


apche flex logo flexatom.com

Apache Flex 4.8.0-incubating Released !

Hey Everyone! The Apache Flex Podling (http://incubator.apache.org/flex) has announced that Apache Flex 4.8.0 has been released. This is a major milestone in the transition of Flex from Adobe to Apache. It represents pretty muc...
by Nouman Naveed


Using [inspectable] metatag

Every experienced Flex developer knows about [Bindable] & [Event] metatags. However, I was surprised to know that some developers don’t know the purpose of [inspectable] metatag. Here I am going to discuss purpose of ...
by Nouman Naveed



Be the first to comment!

Leave a Reply

Your email address will not be published. Required fields are marked *