Flex Skin button, keep icon - apache-flex

Question

I am trying to skin buttons in Flex, but after I skinned a button the icon that I had linked in it disappeared. I know I can add the icon into the skin, but that would mean I have to create lots of different skins.
Any EASY way to fix this?
mxml file:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ns1="*"
xmlns:packageservice="services.packageservice.*"
title="My Dish"
fontSize.Beef="10" textAlign.Beef="center">
<fx:Script>
<![CDATA[
import com.adobe.serializers.utility.TypeUtility;
import mx.events.FlexEvent;
protected function list_creationCompleteHandler(event:FlexEvent):void
{
my_get_beef_dishResult.token = packageService.my_get_beef_dish();
}
protected function list2_creationCompleteHandler(event:FlexEvent):void
{
my_get_pork_dishResult.token = packageService.my_get_pork_dish();
}
protected function list3_creationCompleteHandler(event:FlexEvent):void
{
my_get_chicken_dishResult.token = packageService.my_get_chicken_dish();
}
protected function list4_creationCompleteHandler(event:FlexEvent):void
{
my_get_fish_dishResult.token = packageService.my_get_fish_dish();
}
protected function list5_creationCompleteHandler(event:FlexEvent):void
{
my_get_vegetables_dishResult.token = packageService.my_get_vegetables_dish();
}
]]>
</fx:Script>
<s:states>
<s:State name="Beef"/>
<s:State name="Pork"/>
<s:State name="Chicken"/>
<s:State name="Fish"/>
<s:State name="Vegetables"/>
<s:State name="Other"/>
</s:states>
<s:navigationContent>
<s:Button label="Back" click="navigator.popView();"/>
</s:navigationContent>
<fx:Declarations>
<s:CallResponder id="my_get_beef_dishResult"/>
<packageservice:PackageService id="packageService"/>
<s:CallResponder id="my_get_pork_dishResult"/>
<s:CallResponder id="my_get_chicken_dishResult"/>
<s:CallResponder id="my_get_fish_dishResult"/>
<s:CallResponder id="my_get_vegetables_dishResult"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup x="0" y="0" width="245" height="364" contentBackgroundColor="#E6E6E6">
<s:List id="MyDishOther" includeIn="Other" width="245" height="364" contentBackgroundColor="#E6E6E6"></s:List>
<s:List id="list" includeIn="Beef" width="245" height="365"
creationComplete="list_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_beef_dishResult.lastResult}"/>
</s:List>
<s:List id="list2" includeIn="Pork" width="245" height="365"
creationComplete="list2_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_pork_dishResult.lastResult}"/>
</s:List>
<s:List id="list3" includeIn="Chicken" width="245" height="365"
creationComplete="list3_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_chicken_dishResult.lastResult}"/>
</s:List>
<s:List id="list4" includeIn="Fish" width="245" height="365"
creationComplete="list4_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_fish_dishResult.lastResult}"/>
</s:List>
<s:List id="list5" includeIn="Vegetables" width="245" height="365"
creationComplete="list5_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_vegetables_dishResult.lastResult}"/>
</s:List>
</s:VGroup>
...
<s:Button includeIn="Beef" width="70" icon="assets/beef.png" skinClass="components.Stab"/>
<s:Button includeIn="Beef" width="60" click="currentState='Chicken'" icon="assets/chicken.png"/>
<s:Button includeIn="Beef" width="60" click="currentState='Fish'" icon="assets/fish(1).png"/>
<s:Button includeIn="Beef" width="60" click="currentState='Pork'" icon="assets/porktest(1).png"/>
<s:Button includeIn="Beef" width="60" icon="assets/t_vegetables.png" click="currentState='Vegetables'"/>
.....
</s:VGroup>
</s:View>
SkinClass:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- layer 2: fill -->
<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="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 2: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="60" height="45" radiusX="2" radiusY="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>
</s:Skin>

Answer 1

As I could guess the problem is that your skin is not inherited from SparkButtonSkin.
Icon functionality is implemented in it and default button skin inherited SparkButtonSkin.