使用 Vaadin 应用程序启动器生成的 Master-Detail 视图中不可见的铁图标

Question

我使用 Vaadin app starter https://start.vaadin.com/welcome 和 Master-Detail 视图生成了一个新的 Vaadin Flow 应用程序。

我只在 Windows 10 上启动了“Vaadin”生成的代码。

     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);

但在 Windows 10 上的 2 台不同 PC 中，“重要”列中的铁图标（复选和减号）不可见。 日志中没有错误。

你有解决办法吗？

Answer 1

适用于 Vaadin 14 到 20。

Vaadin 图标不会在应用程序中使用，除非在渲染器中。 由于它没有在 java 代码中使用，您应该在 Master-Detail 类的顶部添加此注释：

@Uses(Icon.class)

我会在 start.vaadin.com 上开一张票来修复它

适用于 Vaadin 21+

Vaadin 21 开始取代 Polymer 组件。 iron-icon 不再可用，已被 vaadin-icon 取代。 在这种情况下，启动器尚未更新。

您可以通过更改模板并将 iron-icon 替换为 vaadin-icon 来修复它。

您还需要添加注释以确保它在生产模式下工作。我目前不知道 Vaadin 21 的替代品。

@Uses(Icon.class)