This example sets an Icon with two states on a Spark Button using a Spark Skin.

IconButton.as

/**
To using in a Flash Builder project:

<controls:IconButton icon="@Embed('assets/images/icon.png')" iconOver="@Embed('assets/images/icon_over.png')" label="Label Button" skinClass="com.thanksmister.components.skins.IconButtonSkin"/>
*/
package com.thanksmister.components.controls
{
	import spark.components.Button;
	import spark.primitives.BitmapImage;
	
	public class IconButton extends Button
	{
		public function IconButton()
		{
			super();
		}
		
		//----------------------------------
		//  icon for up state
		//----------------------------------
		private var _icon:Class;
		private var _iconOver:Class;
		
		[Bindable]
		public function get icon():Class
		{
			return _icon;
		}
		
		public function set icon(val:Class):void
		{
			_icon = val;
		}
		
		//----------------------------------
		//  icon for over and down state
		//----------------------------------
		private var _iconOver:Class;
		
		[Bindable]
		
		public function get iconOver():Class
		{
			return _iconOver;
		}

		public function set iconOver(val:Class):void
		{
			_iconOver = val;
		}
		
		//--------------------------------------------------------------------------
		//
		//  Skin Parts
		//
		//--------------------------------------------------------------------------
		
		[SkinPart(required = "false")]
		public var iconElement:BitmapImage;
		
		
		//--------------------------------------------------------------------------
		//
		//  Overridden methods
		//
		//--------------------------------------------------------------------------
		
		override protected function getCurrentSkinState():String
		{
			var state:String = super.getCurrentSkinState();
			
			if (state == "up" || state == "disabled") {
				iconElement.source = icon;
			} else if (state == "over" || state == "down") {
				if(iconOver) iconElement.source = iconOver; // do nothing if we don't have over icon set
			}
			
			return state;
		}
		
		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);
			
			if (icon !== null && instance == iconElement) {
				iconElement.source = icon;
			}
		}
	}
}

IconButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" 
             alpha.disabled="0.5">
	
    <fx:Metadata>
		[HostComponent("com.thanksmister.components.controls.IconButton")]
	</fx:Metadata>
     
    <fx:Script fb:purpose="styling">
		
        <![CDATA[         
              import spark.components.Group;
            /* Define the skin elements that should not be colorized. 
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
            
            /** 
             * @private
             */     
            override public function get colorizeExclusions():Array {return exclusions;}
            
            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }  
            
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle("cornerRadius");
                
                if (cornerRadius != cr)
                {
                    cornerRadius = cr;
                    shadow.radiusX = cornerRadius;
                    fill.radiusX = cornerRadius;
                    lowlight.radiusX = cornerRadius;
                    highlight.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                }
                
                if (highlightStroke) highlightStroke.radiusX = cornerRadius;
                if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
                if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
                
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            
            private var cornerRadius:Number = 2;         
        ]]>        
    </fx:Script>
        
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
	 <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" 
                                 color.down="0xFFFFFF"
                                 alpha="0.01"
                                 alpha.down="0" />
                <s:GradientEntry color="0x000000" 
                                 color.down="0xFFFFFF" 
                                 alpha="0.07"
                                 alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                                 color.over="0xBBBDBD" 
                                 color.down="0xAAAAAA" 
                                 alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8" 
                                 color.over="0x9FA0A1" 
                                 color.down="0x929496" 
                                 alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 3: fill lowlight -->
    <!--- @private -->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="270">
                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 4: fill highlight -->
    <!--- @private -->
    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.0"
                                 alpha="0.33" 
                                 alpha.over="0.22" 
                                 alpha.down="0.12"/>
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48"
                                 alpha="0.33"
                                 alpha.over="0.22"
                                 alpha.down="0.12" />
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48001"
                                 alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 5: highlight stroke (all states except down) -->
    <!--- @private -->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 6: highlight stroke (down state only) -->
    <!--- @private -->
    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <!--- @private -->
    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <!--- @private -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" 
                                 alpha="0.5625"
                                 alpha.down="0.6375" />
                <s:GradientEntry color="0x000000" 
                                 alpha="0.75" 
                                 alpha.down="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 8: text and icon -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
	<s:Group>

		<s:layout>
			<s:HorizontalLayout gap="1" verticalAlign="middle" paddingTop="3" paddingBottom="0" paddingLeft="10" paddingRight="10"/>
		</s:layout>
		
                <!-- the icon element will be set by the skin -->
		<s:BitmapImage id="iconElement" width="16" height="16"/>
		
		<s:Group height="100%">
			
			<s:Label id="labelDisplay" 
					 textAlign="center"
					 maxDisplayedLines="1"
					 horizontalCenter="-1" verticalCenter="1" verticalAlign="middle"
					 left="2" right="2" >
				
			</s:Label>
			
		</s:Group>
		
	</s:Group>
    
</s:SparkButtonSkin>