For my JavaFX application I use material design icons adding materialdesignicons-webfont.ttf font to my project. Each icon is represented as a character in this font.

For example, an icon can be added to a button this way:

button.setGraphic(new Label(iconChar));

And the button will have an icon and everything will work fine.

However, I would like to add an icon via CSS to allow other developers to easily replace my icons if needed. Could anyone say how to do it?

For my JavaFX application I use material design icons adding materialdesignicons-webfont.ttf font to my project. Each icon is represented as a character in this font.

For example, an icon can be added to a button this way:

button.setGraphic(new Label(iconChar));

And the button will have an icon and everything will work fine.

However, I would like to add an icon via CSS to allow other developers to easily replace my icons if needed. Could anyone say how to do it?

• java
• javafx
• javafx-css

• Presumably iconChar is a String here? Can you show how you are currently defining it? – James_D Commented Feb 11 at 14:03
• @James_D Yes, it is a string, for example, new Label(String.format("%c", 0xF01C9)) – SilverCube Commented Feb 11 at 14:07

1 Answer 1

I recommend using Ikonli, which is a JavaFX-friendly wrapper for many icon sets, including material design. Its API includes a FontIcon class, which you can use in either Java code or FXML, and has CSS-styleable properties.

The linked page contains all the details, but I added the following dependencies to my pom.xml:

        <dependency>
            <groupId>.kordamp.ikonli</groupId>
            <artifactId>ikonli-javafx</artifactId>
            <version>12.3.1</version>
        </dependency>
        <dependency>
            <groupId>.kordamp.ikonli</groupId>
            <artifactId>ikonli-materialdesign2-pack</artifactId>
            <version>12.3.1</version>
        </dependency>

and the following modules to module-info.java:

    requires .kordamp.ikonli.core;
    requires .kordamp.ikonli.javafx;
    requires .kordamp.ikonli.materialdesign2;

Then the following simple demo:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import .kordamp.ikonli.javafx.FontIcon;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) {

        Button button = new Button();
        button.getStyleClass().add("ab-testing");
        FontIcon icon = new FontIcon();
        button.setGraphic(icon);
        BorderPane root = new BorderPane(button);
        Scene scene = new Scene(root, 320, 280);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

with the stylesheet:

style.css:

.ab-testing .ikonli-font-icon {
    -fx-icon-code: mdi2a-ab-testing;
    -fx-icon-size: 24;
}

produces

Note that the icon code is defined entirely in the CSS file, so it can be set without changing the Java (or FXML, if you have it) code. There is also a -fx-icon-color property which supports colors and gradients.

If you don't want to use Ikonli, for some reason, I don't see a particularly straightforward way to specify the button or label text in CSS. You could of course define your own wrapper class with a custom CSS property, but that would essentially be replicating the functionality of the Ikonli FontIcon class, and there is little point in re-inventing the wheel.