Icon Sets

Icon sets allow you to decouple the usage of icons in visual components from real paths to images in theme or font element constants. They also simplify the overriding of icons used in the UI inherited from add-ons.

Icon sets are enumerations with items corresponding to icons. An icon set must implement the Icons.Icon interface which has one parameter: a string that denotes the source of an icon, for example, font-icon:CHECK or icons/myawesomeicon.png. To obtain the source, use the Icons bean provided by the framework.

Consider the process of creating an icon set.

  1. Create an enum that will contain icons. All names of icon set items should match the regexp: [A-Z]_, that is, they should contain only upper-case letters and underscores.

    public enum MyIcon implements Icons.Icon {

    EYE("classpath:/icon/eye.png"), (1)
    PENGUIN("classpath:/icon/penguin.png"); (2)

    private String source;

    MyIcon(String source) {
        this.source = source;
    }

    @Override
    public String source() {
        return source;
    }

    @Override
    public String iconName() {
        return name();
    }
}
    1 Override a Jmix default icon.
    2 Add new icon.

  2. Register an icon set in the jmix.ui.icons-config property of the application.properties file:

    jmix.ui.icons-config=ui.ex1.icon.MyIcon

  3. Now you can use the icons from this icon set simply by its name declaratively in the screen XML descriptor:

    <button icon="PENGUIN"/>

    or programmatically in the screen controller:

    iconButton.setIconFromSet(MyIcon.PENGUIN);

The following prefixes allow you to use icons from different sources in a declarative way:

  • theme - the icon will be served from the current theme directory, for example, themes/helium-extended/icons/check-mark.png:

    <button icon="theme:icons/check-mark.png"/>

  • file - the icon will be served from the file system:

    <button icon="file:D:/JMIX/penguin.png"/>

  • classpath - the icon will be served from classpath:

    <button icon="classpath:/icon/eye.png"/>