Why does the default spark button skin not have iconDisplay tag?

Question

For a Flex 4.6 Button one can define a label and an icon:

<s:Button icon="{@Embed('assets/icon.png'}" label="Do the dance" />

The corrsesponding skin parts are: iconDisplay:BitmapImage and labelDisplay:IDisplayText which are set by the component (adobe ref). They are defined in the ButtonBase.as

spark.components.supportClasses.ButtonBase

//--------------------------------------------------------------------------
//
//  Skin parts
//
//--------------------------------------------------------------------------

[SkinPart(required="false")]

/**
 *  A skin part that defines an optional icon for the button. 
 *  
 *  @langversion 3.0
 *  @playerversion Flash 10.1
 *  @playerversion AIR 2.0
 *  @productversion Flex 4.5
 */
public var iconDisplay:BitmapImage;

[SkinPart(required="false")]

/**
 *  A skin part that defines the label of the button. 
 *  
 *  @langversion 3.0
 *  @playerversion Flash 10
 *  @playerversion AIR 1.5
 *  @productversion Flex 4
 */
public var labelDisplay:IDisplayText;

spark.components.Button extends ButtonBase and adds some new styles and _emphasized property but does not mention anything about iconDisplay. So it seems to me that the only class used to actually draw the button is the skin class. If we go to spark.skins.spark.ButtonSkin which is the default skin used by Flex (or is it?), we will find:

<!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
    <s:Label id="labelDisplay"
             textAlign="center"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
             left="10" right="10" top="2" bottom="2">
    </s:Label>

so that a label can be displayed, but the skin does not have <s:BitmapImage id="iconDisplay"> therefore I don't understand how come the icon is displayed when there is no container to show it?

Answer 1

That's because the ButtonSkin extends SparkButtonSkin which has iconDisplay placed in iconGroup and displayed with constructIconParts(). It wasn't very clear because of mxml syntax for extending classes (using <s:SparkButtonSkin> as root node for ButtonSkin.mxml).

There's also a great skin for displaying scalable FXG icons in a button: http://hulstkamp.com/articles/flex-advanced-fxg-spark-icon-buttons/