All labeled controls support a "graphic" property that can be any node. Used for example as the icon on a Button. This is settable as -fx-graphic from CSS but at the moment the only acceptable values are url("http://....") as a url to a image that will be loading into a ImageView and set as the graphic. I want to add the ability to create a styleable region as he graphic that can be style from CSS with SVG etc.

The proposal is to add a value type for -fx-graphic like:

#myButton {
      -fx-graphic: region(".graphic");
}

where the new region node can be styled with:

#myButton > .graphic {
    -fx-padding: 10px;
    -fx-background-color: red;
}

or you could use a ID for new region rather than styleclass like:

#myButton {
      -fx-graphic: region("#myGraphic");
}
#myButton > #myGraphic {
    -fx-padding: 10px;
    -fx-background-color: red;
}

This will allow us to have CSS style-able vector SVG icons that can scale nicely for Retina displays etc.