the iron-icon not visible with a Master-Detail view generate with Vaadin app starter

user_16416462 0
Viewed 239

I have generate a new Vaadin Flow application with Vaadin app starter https://start.vaadin.com/welcome with a Master-Detail view.

I have only launch the code generate by "Vaadin" on Windows 10.

     grid.addColumn("occupation").setAutoWidth(true);
        TemplateRenderer<SamplePerson> importantRenderer = TemplateRenderer.<SamplePerson>of(
                "<iron-icon hidden='[[!item.important]]' icon='vaadin:check' style='width: var(--lumo-icon-size-s); height: var(--lumo-icon-size-s); color: var(--lumo-primary-text-color);'></iron-icon><iron-icon hidden='[[item.important]]' icon='vaadin:minus' style='width: var(--lumo-icon-size-s); height: var(--lumo-icon-size-s); color: var(--lumo-disabled-text-color);'></iron-icon>")
                .withProperty("important", SamplePerson::isImportant);
        grid.addColumn(importantRenderer).setHeader("Important").setAutoWidth(true);

But in 2 different PC on Windows 10, the iron-icon (check and minus) in the column "important" is not visible. No error in logs.

Image with check and minus is not visible

Have you a solution?

vaadin-flow vaadin
1 Answers

For Vaadin 14 to 20.

Vaadin icons are not used in the application except in the renderer. As it's not used in the java code you should add this annotation on top of the Master-Detail class:

@Uses(Icon.class)

I will open a ticket to fix it in start.vaadin.com

For Vaadin 21+

Vaadin 21 is starting to replace Polymer components. iron-icon is not available anymore and has been replaced by vaadin-icon. In this case the starter has not been updated.

You can fix it by changing the template and replace iron-icon with vaadin-icon.

You will also need to add the annotation to be sure that it's working in production Mode. I currently don't know the replacement for Vaadin 21.

@Uses(Icon.class)
user_146684750
Related