How to style a SVG using CSS in javaFX FXML

Question

I'm using SVG for an image in a button. But I'm not able to fill in color for it through CSS. Below is the code to render a button.

<Button  onAction="#closeApplication" >
<graphic>
 <SVGPath content="M10,16 10,0 0,8z" styleClass="button‐icon‐shape" />
</graphic>
</Button>

here is the css

.button-icon-shape SVGPath{
   -fx-fill:  red;
}

Arlina

Answer 1

here is how it worked. I had to style the button and use the class to style the svg in the button.

<Button  onAction="#closeApplication" styleClass="closeButton">
        <graphic>
            <SVGPath content="M10,16 10,0 0,8z"  />
        </graphic>
</Button>

here is the css

.closeButton{

}
.closeButton SVGPath{
   -fx-fill:  red;
}

Arlina

Answer 2

I am aware this is an old question but this OP solution is not the best one to my mind. If you encountered the same kind of problem, my advise is to read the JavaFX CSS Reference Guide (JFX 8) and especially the redirection to this selectors link.

The simplest solution here with the initial code was the following:

<Button onAction="#closeApplication">
    <graphic>
        <SVGPath content="M10,16 10,0 0,8z" styleClass="button-icon-shape" />
    </graphic>
</Button>

And the JavaFX CSS associated would be :

.button-icon-shape {
   -fx-fill:red;
}

Whitebook