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");
}

Answer 2

 /**
 * the disclosure node is a StackPane, and has as a child another StackPane with style class arrow
 */

.tree-cell > .tree-disclosure-node > .arrow,
.tree-table-row-cell > .tree-disclosure-node > .arrow {
    -fx-background-color: transparent;
}

.tree-cell:expanded > .tree-disclosure-node > .arrow,
.tree-table-row-cell:expanded > .tree-disclosure-node > .arrow {
    -fx-background-color: transparent;
}

.tree-cell > .tree-disclosure-node,
.tree-table-row-cell > .tree-disclosure-node{
    -fx-background-image: url("/icons/icons8_stop_sign_100px_1.png"); /* Url of the icon */
    -fx-background-size: 90% 90%; /* Can be `cover` or `100% 100%` ect. */
    -fx-background-repeat: no-repeat;
    -fx-background-position: center center; /* Put the icon in the center */
}

.tree-cell:expanded > .tree-disclosure-node ,
.tree-table-row-cell:expanded > .tree-disclosure-node {
    -fx-background-image: url("/icons/icons8_new_moon_100px_1.png"); /* Url of the icon */
    -fx-background-size: 90% 90%; /* Can be `cover` or `100% 100%` ect. */
    -fx-background-repeat: no-repeat;
    -fx-background-position: center center; /* Put the icon in the center */
}