Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
TreeTable Icon
I am tryng to customize the TreeTable expand/collapse icon to my own icon. Instead of the right and bottow arrows, I would like to use the + and - icons. I have defined a style in my app CSS as follows
.my-tree-table .v-treetable-node-open
{
background: transparent url(icons/icon_MinusSmall.png) no-repeat;
}
In my code I apply the style as follows
summaryTable.setStyleName("my-tree-table");
My icon is added but the default icon is also visible. See attached.
Vaadin version is 7.4.4
What am I doing wrong.
Thanks,
Note that at least Valo uses font icons (from the FontAwesome font) for the tree icons. Therefore, the easiest way would be to use font icon, which you set with a rule such as
.v-treetable-node-open::before {
content: "+";
}
.v-treetable-node-closed::before {
content: "-";
}
Well, the Valo uses an animation to rotate the icon, so you'd perhaps want to disable that animation. Or not.
You'd maybe also want to use some other font-family than FontAwesome for that.