How can I change the size of icons in the Tree control in Flex?

Question

I embed SVG graphics in my Flex application using

package MyUI
{
    public class Assets
    {
        [Embed(source="/assets/pic.svg"]
        [Bindable]
        public static var svgPic:Class;
    }
}

and then extending the Tree class with some of my own code, setting the icon upon adding a node to the data provider:

public class MyTree extends Tree
{
    public function MyTree()
    {
        // ...
        this.iconField = "svgIcon";
        // ...
        this.dataProvider = new ArrayCollection;
        this.dataProvider.addItem({ /* ... */ svgIcon: MyUI.Assets.svgPic /* ... */ });
        // ...
    }
}

Now I have two things I want to do:

• use the SVG graphics in multiple places in the app, scaling them to the appropriate size for each appearance, ie scale them to a proper icon size when using them in the tree
• change the size of the icon at runtime, eg display a slightly larger icon for selected items or let an icon "pulse" as a response to some event

I read the Flex documentation on the 9-slice scaling properties in the Embed tag, but I think that's not what I want.

---

Edit:

I unsuccessfully checked the "similar questions" suggested by SO, among others this one:

Flex: Modify an embedded icon and use it in a button?

Answer 1

Subclass mx.controls.treeClasses.TreeItemRenderer and make it resize the icon to your desired dimensions, or create your own item renderer implementation by using the same interfaces as TreeItemRenderer. Set a custom item renderer with the itemRenderer property:

exampleTree.itemRenderer = new ClassFactory( ExampleCustomItemRendererClass );

Answer 2

The answer to this question might point you in the right direction, without knowing more about the trouble you're having:

Flex: Modify an embedded icon and use it in a button?

Hope it helps!