The lumo icon cross button is not displayed with Vaadin 25

Flow
1

image
image1208Ă—133 7.04 KB

This is only happening to me with the final compilation with

mvn clean package This is what I found strange.

With this simple code, when displayed in a dialog box, the x is not showing.

No CSS is applied.

public class AboutDialog extends Dialog {

    public AboutDialog() {
        //super.addClassName("about-dialog");

        final Button closeButton = new Button(new Icon("lumo","cross"));
        closeButton.setTooltipText("Close");
//        closeButton.addClassName(LumoUtility.Margin.Left.AUTO);
//        closeButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY, ButtonVariant.LUMO_SMALL);
        closeButton.addClickListener(e -> close());
        super.getHeader().add(closeButton);

Vaadin 25.0.2 and jdk21

2

Try to change the modality of the dialog.

3

mmmm set modality to MODELESS, STRICT, the same thing happend

even a button added with lumo cross, without dialog.

image
image1275Ă—314 8.85 KB

4

Interesting. What about if you use LumoIcon.CROSS.create() ?

5

With this, if it works.

image
image1292Ă—305 9.51 KB

6

Good. I remember that there was some discussion about how to ensure Lumo Icons are loaded, now that Lumo itself is loaded as a stylesheet instead of jsmodules, while the icons are still in a jsmodule.

I’ll make some investigations, and probably create a ticket when I know more.

1 Like
7

Right, so previously the Lumo class loaded the icon npm dependency, but in V25 that class is not necessarily used, as Lumo is loaded as a stylesheet (either explicitly with @StyleSheet or through the legacy @Theme annotation.

The LumoIcon class does load the dependency, however, so as long as you use that, you’ll get the icons.

Otherwise, you need to load the npm package manually:

@NpmPackage(value = "@vaadin/vaadin-lumo-styles", version = "25.0.0")
@JsModule("@vaadin/vaadin-lumo-styles/vaadin-iconset.js")

This needs to be mentioned in the documentation. We could also consider automatically loading the package when using @Theme or the Lumo class, which would be loaded when using the Lumo.STYLESHEET constant with @StyleSheet.

8

By the way, are you loading Lumo explicitly with @StyleSheet or implicitly with @Theme?

9

LOL, I knew you were going to ask me that.

Look at this, this is exactly the code.

@Push
@SpringBootApplication
@StyleSheet(Lumo.STYLESHEET)
@StyleSheet(Lumo.UTILITY_STYLESHEET)
@StyleSheet("styles.css")
@ColorScheme(ColorScheme.Value.LIGHT_DARK)
public class Application implements AppShellConfigurator {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}
10

:D good to be predicable sometimes.
And I wanted to know because that means I need to check if the same problem is also with @Theme, or if the icon package is loaded automatically that way.

11

Good morning, partner.

I’m already testing with @Theme in this branch. Everything is GitHub - rucko24/xsd-validator-ui at test/theme-annotation.

I see the following:

With the production standalone, mvn clean package and in development mode

  • 1 With LumoIcon.CROSS.create()
  • 2 With new Icon(“lumo”,“cross”)

Both icons are displayed correctly.

12

Morning, and thanks for testing that!

So it seems that loading Lumo via @Theme does load Lumo icons.

That leaves us with @StyleSheet, for which we could probably make the Lumo class load the package, since you’d typically load lumo through the Lumo.STYLESHEET constant in it. Unless there is some reason we can’t or shouldn’t do that.

I created an issue here: Load Lumo icons in Lumo class · Issue #8454 · vaadin/flow-components · GitHub