Provide own ICON

Support
#1

In JMIX 2, is it possible to provide my own icon to use in the menu?

Thanks

#3

Hello!

For now, JmixListMenu component only takes VaadinIcon. I created an issue: Support custom icons in ListMenu component · Issue #2170 · jmix-framework/jmix · GitHub.

The only way to support custom icons is overriding menu component and providing method for custom icons.

For instance:

ExtJmixListMenu 
public class ExtJmixListMenu extends JmixListMenu {

    public void addIconToMenuItem(String id, IconFactory iconFactory) {
        MenuItem menuItem = getMenuItem(id);

        if (menuItem instanceof MenuBarItem) {
            Details menuBarComponent = getMenuBarComponent(menuItem);
            Span summary = (Span) menuBarComponent.getSummary();

            Icon icon = iconFactory.create();
            icon.addClassName(MENUBAR_ICON_CLASS_NAME);

            Div div = new Div();
            div.add(icon, summary);
            div.addClassName(JMIX_MENUBAR_SUMMARY_ICON_CONTAINER_CLASS_NAME);
            div.setTitle(Strings.nullToEmpty(menuItem.getDescription()));
            menuBarComponent.setSummary(div);

        } else {
            RouterLink menuItemComponent = getMenuItemComponent(menuItem);
            Icon icon = iconFactory.create();
            icon.addClassName(LINK_ICON_CLASS_NAME);
            menuItemComponent.addComponentAsFirst(icon);
        }
    }
}

Register this component:

@Bean
public ComponentRegistration extJmixListMenu() {
    return ComponentRegistrationBuilder.create(ExtJmixListMenu.class)
            .replaceComponent(JmixListMenu.class)
            .build();
}

And in MainView:

@ViewComponent
protected ExtJmixListMenu menu;
@Subscribe
protected void onInit(final InitEvent event) {
    menu.addIconToMenuItem("User.list", MyIcons.BUSHES_OF_LEAVES_SVGREPO_COM);
    menu.addIconToMenuItem("application", MyIcons.LEAVES_2_SVGREPO_COM);
}

Sample project: f-icons.zip (181.7 KB)

#5

Is there a way to specify own icon from Font collection sets without implementing the workaround above?

The ticket Support custom icons in ListMenu component · Issue #2170 · jmix-framework/jmix · GitHub was closed.

Thanks for support.

#6

Hello!

Since 2.2.0 you can use any icon in ListMenu. For instance, you can specify icon from your custom icon-set in menu.xml:

<menu id="application" opened="true"
      title="msg://com.company.ficons/menu.application.title" 
      icon="my-icons:leaves-2-svgrepo-com">
      ...
</menu>

Note that withIcon(VaadinIcon) is deprecated, use setPrefixComponent() instead:

@ViewComponent
private JmixListMenu menu;

@Subscribe
protected void onInit(final InitEvent event) {
    menu.getMenuItem("User.list")
            .setPrefixComponent(MyIcons.BUSHES_OF_LEAVES_SVGREPO_COM.create());
}

I migrated the project above to 2.2.0 version. Now it doesn’t use the workaround.
f-icons.zip (121.6 KB)