Theme Customization - Icons

Support
#1

Hi CUBA,

How do I override the default icon for havana theme? I want to override the default icon at global level not per screen.

I follow below links but still not able to make it.

https://doc.cuba-platform.com/manual-latest/manual.html#web_theme_extension
https://doc.cuba-platform.com/manual-latest/manual.html#gui_icons

Is there any guideline or examples I can follow ?

Regards,
CK

#3

Hello @ckwan,

The custom icon set is the right way to override icons in the application, but for the Havana theme, in some cases, it is not enough. Havana has some *.png icons for values in the CubaIcon set and the corresponding path to the png icon in havana-theme.properties or legacy-theme.properties.

For instance, let’s override ExcelAction icon.

  1. Create custom icon set and register it in the web-app.properties. It will be enough for Halo and Hover theme.
    public enum MyIcon implements Icons.Icon {

    EXCEL_ACTION("icons/cookies-16.png");

    protected String source;

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

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

    @Override  
    public String iconName() {
        return name();
    }
}

    cuba.iconsConfig = +com.company.demoico.MyIcon
  2. Create custom theme.properties with the following content:
    @include=com/haulmont/cuba/havana-theme.properties
  3. Add it to the cuba.themeConfig in the web-app.properties instead of havana-theme.properties:
    cuba.themeConfig=com/company/demoico/my-havana-theme.properties \
   com/haulmont/cuba/halo-theme.properties com/haulmont/cuba/hover-theme.properties
  4. Now we need to check legacy-theme.properties and find property with EXCEL_ACTION. Then we can add it to custom theme file with custom path:
    @include=com/haulmont/cuba/havana-theme.properties

icons.EXCEL_ACTION = icons/cookies-16.png

Check result demo project: demo.zip (104.6 KB)