Spark buttons with embeded images

Question

I'm a Flex 4 noob so be patient...

I want to do something like:

Main.mxml

<s:HGroup id="animals">

    <s:Button name="dog">Dog Name</s:Button>
    <s:Button name="bird">Bird Name</s:Button>
    <s:Button name="cat">Cat Name</s:Button>

</s:HGroup>

Skin for #animals s|Button

<?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" minWidth="40" minHeight="22">

    <fx:Metadata>
       [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:BitmapImage width="104" height="54" source="@Embed('../../assets/img/animals/__PUT_HERE_BUTTON_NAME__.png')"/>

    <s:Label
    id="labelDisplay"
    textAlign="center"
    color="0xffffff"
    fontFamily="CuteFont"
    fontWeight="bold"
    fontSize="15"
    width="100%"
    top="64"
    />
</s:Skin>

Do I have to extend the Button component or how should I proceed?

Answer 1

Create a custom Button with an icon property (Object) and a required iconBitmapImage (BitmapImage) skin part.

It the icon setter, apply this property to the source property of iconBitmapImage.

Then you should be able to do something like :

<s:CustomButton name="dog" icon="@Embed('../../assets/img/animals/dog.png')" />