Asign icons to Tree control in flex.

There are icons asigned to Tree control for folderOpen, folderClose and for leaf nodes.The folder icon for folder open and close and one leaf icon.What if i want to change this default icons of Tree control.. its simple !.

The properties we got to use here is that:

folderOpenIcon -> for folder Open.

folderClosedIcon ->for folder close.

defaultLeafIcon ->for leaf icon.


<mx:Tree x=”10″ y=”10″ folderOpenIcon=”@Embed(‘images/fopen’)” ></mx:Tree>

Similarly for other properties..!


11 Responses to Asign icons to Tree control in flex.

  1. Marcus says:

    Is it possible to use different folderOpenIcon’s / folderClosedIcon’s in a tree?

    Can I override this behavior programmtically?

    • Sameer says:

      One way of achieving different node icons – define the iconFunction on Tree.


      private var IconCar:Class;

      private var IconBus:Class;

      public function handleIcon(itemObject:Object):Class
      var item:XML = itemObject as XML;
      var iconClass:Class;
      iconClass = IconCar;
      else if(item.@isBus==true)
      iconClass = IconBus;

      Hope this helps.

  2. kumargandhi says:

    its possible ,first define the icons of type Class and assign them to nodes programatically as u required and setItemIcon is the methos we have to use of Tree class.

    private var FolderIcon1:Class;

    private var FolderIcon2:Class;

    private var FolderIcon3:Class;

    //These are the folder icons iam assaining to three folders.with the code below.

    private function init():void {
    var nodeOne:XML = xmlListColl.getItemAt(0) as XML;
    tree.setItemIcon(nodeOne, FolderIcon1, FolderIcon1);
    // similarly set for other folders. here xmlListColl is my XML List for Tree.



    Try it, will work.or comment me.

  3. allyourbase says:

    …or in other words:
    “Marcus, have a look at the adobe-website”?

    no offense meant, but i think this single blog entry is quite useless… it doesnt provide any information, cause the properties are self-speaking (and there less space consuming than explained) and the first place to search for information is the adobe website… so its a bit frustrating looking around for help with icons for trees and then finding just a little bit of nothing. 😦


    • kumargandhi says:

      Hello there,

      i am just a programmer trying to help other programmers and in deed get help from those programmers, and regarding my post i just described the properties of the Tree Class and their usage , yes you can get that from the adobe website and even from the Help given in the Flex Builder (if you are using one), but trust me there are some programmers who search on the other blogs then start from where its actually required. and finally do you require icons for the Tree ??, comment me if that is what you want , i will try to help you. 🙂 , thanks for the comment.


  4. Ronnie says:

    Hi kumar,
    I wanna use different icons in the child nodes based on the items they represent. How do i do that????

  5. Ronnie says:

    Hi kumar,
    I am trying to use an icon for defaultLeafIcon. But when i specified that property in it says,
    Unable to resolve assetsimagesabc.jpg for transcoding, while i have specified it as:


  6. Ronnie says:

    In your above example u have used an XMLCollection and have assigned the icons using getItemAt() function.
    I am using a plain XML which is generated dynamically. Now i have to assign different icons to different nodes based on the type property(string) of that node.
    How do i do this.

    I have tried:
    var nodeOne:XML = treexml.descendants().(@type == “ABC”) as XML;
    var nodeTwo:XML = treexml.descendants().(@type == “XYZ”) as XML;

    treeBrowser.setItemIcon(nodeOne, pic1, pic1);
    treeBrowser.setItemIcon(nodeTwo, pic2, pic2);

    But it is not working. No errors, nothing.

    treexml is the XML for my treeBrowser(id for my tree).

  7. Vijayata says:


    This feature is fine, but do we have any option for the case that, I don’t want any icon to be shown for the items?
    I don’t want any kind of images to be seen for the item, not even the arrow icon for the items.


    • kumargandhi says:


      try this,

      disclosureOpenIcon=”{null}” disclosureClosedIcon=”{null}”

      for the Tree Control, but here the catch is, how can you open the Tree branch if you are removing the Arrow icon[since they are expanded on Arrow icon Click], not to worry you got to write some extra code to do it manually.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: