JavaFXでSVGアイコンを使ったボタンのサンプル

ShapeSample.css

.button-icon-shape {
    -fx-scale-x: 2.0;
    -fx-scale-y: 2.0;
}

.stop-button-icon {
    -fx-fill: black;
}

.circle-button {
    -fx-pref-width: 4.0em;
    -fx-pref-height: 4.0em;
    -fx-background-radius: 2.0em;
    -fx-background-color: null;
    -fx-border-radius: 2.0em;
    -fx-border-color: black;
    -fx-border-width: 2.0px;
}

.circle-button:disabled {
    -fx-border-color: rgb(0, 0, 0, 0.7);
}

.circle-button:hover {
    -fx-background-color: #dcdcdc;
}

.circle-button:pressed {
    -fx-background-color: black;
    -fx-border-color: white;
}

.circle-button:pressed SVGPath {
    -fx-fill: white;
}

ShapeSample.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.shape.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" stylesheets="@ShapeTest.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button contentDisplay="GRAPHIC_ONLY" layoutX="55.0" layoutY="51.0" mnemonicParsing="false" styleClass="circle-button">
         <graphic>
            <SVGPath content="M7,2.019V0L3,3l4,3V4.027c2.25,0.249,4,2.156,4,4.473  c0,2.485-2.015,4.5-4.5,4.5S2,10.985,2,8.5C2,8.331,2.01,8.164,2.027,8H0.019C0.007,8.165,0,8.332,0,8.5C0,12.09,2.91,15,6.5,15  S13,12.09,13,8.5C13,5.078,10.356,2.274,7,2.019z" styleClass="button-icon-shape" />
         </graphic>
      </Button>
      <Button layoutX="162.0" layoutY="51.0" mnemonicParsing="false" styleClass="circle-button">
         <graphic>
            <SVGPath content="M10,16 10,0 0,8z" styleClass="button-icon-shape" />
         </graphic>
      </Button>
      <Button layoutX="270.0" layoutY="51.0" mnemonicParsing="false" styleClass="circle-button">
         <graphic>
            <SVGPath content="M 0,16 0,0 10,8 z" styleClass="button-icon-shape" />
         </graphic>
      </Button>
      <Button layoutX="381.0" layoutY="51.0" mnemonicParsing="false" styleClass="circle-button">
         <graphic>
            <SVGPath content="M 12.055,8.021 16.035,4.024 12.016,0.001 8.025,3.991 4.037,0 0,3.992 4.008,8.009 0.016,12 l 4.016,4.079 4.011,-4.028 4.003,4.013 4.004,-4.044 z" styleClass="button-icon-shape" />
         </graphic>
      </Button>
   </children>
</AnchorPane>