JavaFX Pack de iconos

Usualmente deseamos darle un buen aspecto a nuestras aplicaciones JavaFX, por ello los iconos que utilicemos son parte importante de este aspecto, existe una pequeña pero muy interesante librería llamada ikonli que nos permite utilizar los packs de iconos como: FontAwesome, Icomoon, Devicons, etc., puede ser utilizada en Swing como en JavaFX, en este tutorial nos centraremos en el uso sobre esta última API.

Creamos nuestro proyecto JavaFX Maven y agregamos la siguiente dependencia:

<dependency>
    <groupId>org.kordamp.ikonli</groupId>
    <artifactId>ikonli-javafx</artifactId>
    <version>1.9.0</version>
</dependency>

<dependency>
    <groupId>org.kordamp.ikonli</groupId>
    <artifactId>ikonli-devicons-pack</artifactId>
    <version>1.9.0</version>
</dependency>
<dependency>
    <groupId>org.kordamp.ikonli</groupId>
    <artifactId>ikonli-fontawesome-pack</artifactId>
    <version>1.9.0</version>
</dependency>

La primer dependencia es la respectiva librería, las dos últimas son los packs de iconos que utilizaremos en nuestra aplicación, puedes agregar aquellos que te interesen.

En el enlace http://aalmiray.github.io/ikonli/ puedes ver los packs disponibles y su correspondiente dependencia Maven o Gradle, además al hacer clic en el enlace Cheat-Sheet que se muestra en cada paquete podrás ver los distintos iconos, su nombre y enumeración Java para utilizarlos en tu aplicación.

Usar ikonli desde FXML

Podemos agregar los iconos a un archivo FXML, solo debemos usar la etiqueta FontIcon, a través del atributo iconLiteral indicamos el nombre del icono que deseamos mostrar.

<Label text="Nombre" GridPane.rowIndex="1">
   <graphic>
      <FontIcon iconLiteral="di-redhat" iconSize="28" />
   </graphic>
</Label>

Con esto agregamos el icono a la propiedad graphic del control Label, el atributo iconSize establece el tamaño, con iconColor le cambiamos el color.

También es posible apilar varios iconos, esto nos permitirá combinarlos ubicándolos uno encima del otro, para esto requerimos un StackedFontIcon, por ejemplo:

<Label contentDisplay="TOP" text="JavaFX Ikonli">
   <graphic>
      <StackedFontIcon iconSize="42">
         <children>
            <FontIcon iconColor="#da5f40" iconLiteral="di-apple" iconSize="14" />
            <FontIcon iconColor="#537ebf" iconLiteral="fa-clone" iconSize="22" />
         </children>
      </StackedFontIcon>
   </graphic>
</Label>

Aplicando lo aprendido podemos crear cosas como estas:

Agregar los iconos desde código Java es igual de simple, solamente utilizamos la respectiva clase e indicamos la enumeración que corresponde al icono que deseamos mostrar.

FontIcon fontIcon = new FontIcon(FontAwesome.AMAZON);
fontIcon.setIconSize(28);
fontIcon.setIconColor(Color.BROWN);

FontIcon extiende la clase Text por lo que puedes agregar un icono como cualquier otro Node a una Scene, ten cuidado de no establecer la el texto de propiedad text ya que de hacerlo se muestra el texto y no el gráfico.

Para finalizar te dejo una pequeña aplicación que puedes utilizar para explorar los distintos iconos con sus respectivos nombres.

public void start(Stage stage) throws Exception {

    FlowPane root = new FlowPane();
    root.setHgap(10.0);
    root.setVgap(10.0);
    root.setPadding(new Insets(10.0));

    for (Ikon ikon : allOf(FontAwesome.class)) {
        Label name = new Label(ikon.getDescription());

        FontIcon fontIcon = new FontIcon(ikon);
        fontIcon.setIconSize(28);
        fontIcon.setIconColor(Color.GRAY);

        VBox iconpane = new VBox(fontIcon, name);

        iconpane.setAlignment(Pos.CENTER);
        iconpane.setStyle("-fx-border-color: gray; -fx-padding: 5px;");

        root.getChildren().addAll(iconpane);
    }

    ScrollPane scrollPane = new ScrollPane(root);
    scrollPane.setFitToWidth(true);

    Scene scene = new Scene(scrollPane, 800, 600);

    stage.setTitle("JavaFX & Ikonli");
    stage.setScene(scene);
    stage.show();
}

Esta aplicación solo muestra un pack de iconos, si deseas visualizar otro debes cambiar la clase en el método allOf() indicando la clase que corresponde al pack que deseas visualizar, también recuerda añadir las dependencias del mismo.

for (Ikon ikon : allOf(Devicons.class)) { ... }

Es todo por ahora, nos vemos en la próxima.