View Full Version : [CLOSED] Treepanel - Use custom Icons

Feb 17, 2014, 1:00 PM
I know there are lot of icons in the Ext icon list, but sometimes I need to use additional custom icons.

What are the best practices to use custom icons? What's the Image format I should use and the resolution?

How can I add some additional Icons to use them in the controls?

I need to use custom icons on a treeview node but I didn't found a solution.

have a good day!

Feb 17, 2014, 2:09 PM
Hi @John_Writers,

Please use a Node's IconFile of IconCls.

<ext:Node Text="Node 1" IconFile="resources/images/test.png" />
<ext:Node Text="Node 2" IconCls="my-icon" />

.my-icon {
background-image: url(resources/images/test.png);

Please note that <style> is not required for IconFile.

Feb 17, 2014, 3:37 PM
Ok, I used the IconFile property, but I can see only a little part of the image, because the image is too big.

What's the best format and resolution to convert the images to?


Feb 18, 2014, 2:35 AM
I think you have to decrease the image's size manually in some utility for editing of images. It should be 16x16.

Feb 18, 2014, 8:35 AM
perfect! with the 16x16 png image it works well, but,

I need to have a bigger tree, with bigger icons, like 32x32 or 64x64.

How can I make the ext tree bigger?

Thanks for your time.

Have a good day.

Feb 18, 2014, 12:08 PM
It is not supported by default, but you can try to get it via CSS.

<ext:TreePanel runat="server" Cls="my-tree">

.my-tree .x-tree-icon {
width: 24px;
height: 24px;