How to use FXG as mx:Button icon

Question

I'm trying to use a FXG image as the icon for a button that also contains a caption. My FXG file is located at resources/SpeakerIcon.fxg and my attempted usage looks like this in my mxml file:

     <mx:Button id="audioButton" label="Audio"
                   ....
                   icon="{resources.SpeakerIcon}"/>

When I try to use this I get "TypeError: Error #1034: Type Coercion failed: cannot convert resources::SpeakerIcon@41fa0e1 to mx.core.IFlexDisplayObject." My research indicates that FXG files should be s:Graphics which do implement IFlexDisplayObject http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/primitives/Graphic.html.

What simple thing am I missing?

Answer 1

The <s:Graphics/> object is different than the <Graphics/> tag in an FXG document.

<s:Graphics/> is the base class for Spark primitive shape components (like <s:Rect/>). These are not as lightweight as their FXG counterparts. As such they do not implement the IFlexDisplayObject interface (as @Flextras has just posted :)

FXG assets can be treated as SpriteVisualElement in your Flex code, which technically means FXG assets implement the IVisualElement interface.

If you can, use the Spark <s:Button/> class instead of mx. I don't think <mx:Button/> works with FXG.

Answer 2

For an FXG you should use a Sprite or [in your case] a SpriteVisualElement. I don't believe either of those classes implement IFlexDisplayObject.

You may consider wrapping your FXG element up in this FXGImage class from my Apache Flex whiteboard. FXGImage extends UIcomponent which is an IFlexDisplayObject.

Here is a direct link to the source code for the class.