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

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

我生成了一个带有 Vaadin app starter https://start.vaadin.com/welcome 的新 Vaadin Flow 应用程序，带有 master-detail 视图。

我只在 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 中，“重要”列中的铁图标（选中和减号）不可见。 日志中没有错误。

Image with check and minus is not visible

你有解决方案吗？

解决方法

对于 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)