How to display my icon instead of arrow in TreeView?

Question

I try to replace default arrow icon in TreeView with my icon. The problem is that my icon is cropped although it is only 9x9 pixels. To replace icon I use CSS as suggested on stackoverflow:

.tree-cell > .tree-disclosure-node > .arrow {
    -fx-background-color: null;
    -fx-background-image: url("plus-icon.gif");
}

.tree-cell:expanded > .tree-disclosure-node > .arrow {
    -fx-background-color: null;
    -fx-background-image: url("minus-icon.gif");
}

But this makes my tiny icon cropped(cut):

I tried to change this by playing with css and padding but it does not help.

Thank you!

Answer 1

Use 9*9 icons and also given CSS:

.tree-cell .tree-disclosure-node .arrow {
-fx-shape: null;
-fx-background-color: null;
-fx-background-image: url("plus-icon.gif");
}

.tree-cell:expanded .tree-disclosure-node .arrow {
-fx-shape: null;
-fx-background-color: null;
-fx-background-image: url("minus-icon.gif");
}