Loosing Button's icon property value

[Deepak MS]

Hey there,

I’m working on an iPad app and I am using button with a custom skin:



<s:Button id="btnRefreshDB" label="Refresh Data"

                                click="refreshDBclickHandler()" enabled="
true"

                                icon="@Embed('asset/images/refresh.png')"
textDecoration="none"

                                touchTap="refreshDBclickHandler()"/>



I also have a CSS which has following declaration:

s|Button

{

      skinClass: ClassReference("com.skins.AppButtonSkin");

      color: #FFFFFF;

      fontFamily: Arial;

      fontSize: 25;

      fontWeight: bold;

      chrome-color: #ff0000;



}





AppButtonSkin just lays out the background:

 <?xml version="1.0" encoding="utf-8"?>

<!-- SparkSkinning/mySkins/SquareButtonSkin.mxml -->

<s:SparkSkin

      xmlns:fx="http://ns.adobe.com/mxml/2009";

      xmlns:s="library://ns.adobe.com/flex/spark"

      minWidth="100" minHeight="100"

      alpha.disabled="0.5">



      <fx:Metadata>

            [*HostComponent*(*"spark.components.Button"*)]

      </fx:Metadata>



      <fx:Script>

            <![CDATA[

                  *static* *private* *const* exclusions:Array = [*
"labelDisplay"*];

                  *override* *public* *function*
*get*colorizeExclusions():Array {
*return* exclusions;}

            ]]>

      </fx:Script>



      <s:states>

            <s:State name="up" />

            <s:State name="over" />

            <s:State name="down" />

            <s:State name="disabled" />

      </s:states>



      <s:Rect left="1" right="1" top="1" bottom="1" radiusX="0" radiusY="0">

            <s:fill>

                  <s:LinearGradient rotation="90">

                        <s:GradientEntry color="0x00b1f2"

                                                 color.over="0xBBBDBD"

                                                 color.down="0x004B7D"

                                                 alpha="1" />

                        <s:GradientEntry color="0x049AD1"

                                                 color.over="0x9FA0A1"

                                                 color.down="0x004B7D"

                                                 alpha="1" />

                  </s:LinearGradient>

            </s:fill>

      </s:Rect>



      <s:Label id="labelDisplay"

                   textAlign="center"

                   verticalAlign="middle"

                   lineBreak="toFit"

                   horizontalCenter="0" verticalCenter="1"

                   left="10" right="10" top="2" bottom="2">

      </s:Label>



</s:SparkSkin>





When I apply this skin to the button, I am loosing icon and label color
property( and all other properties that are defined within CSS for a
button). How do I retain those properties while I apply a custom skin to a
button? To use icon in particular, should I again declare a image component
within the custom skin besides the label?



Kindly help…



Cheers!

Deepak