2

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?

ODN
  • 23
  • 3
  • Similar: [*HTML icons that worked fine in Vaadin 20 longer work in Vaadin 21*](https://stackoverflow.com/q/69936586/642706). – Basil Bourque Nov 12 '21 at 23:02

2 Answers2

3

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)
Anna Koskinen
  • 1,362
  • 3
  • 22
Jean-Christophe Gueriaud
  • 1,328
  • 3
  • 8
  • Thanks. I only added @Uses(Icon.class) but it doesn't seem enough. And @Uses is deprecated in vaadin 21. – ODN Jul 14 '21 at 10:16
  • 2
    In 21, i have had **@Uses(Icon.class)** and modify **iron-icon** by **vaadin-icon** in the template : **it works!!** Thanks – ODN Jul 15 '21 at 08:31
0
Include these import statements in your view-name.ts file

import '@vaadin/icon';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
import '@vaadin/icons';
Mahesh solanki
  • 21
  • 3