Question

如何用自己的图标替换Vaadin Flow组件中使用的图标（日历，上传等）？那有可能吗？我没有在组件的API中看到任何内容，而且看起来图标是字体图标，而不是通常的铁图标。

Answer 1

是的，组件图标是使用字体图标实现的。主要原因是应该使用主题（CSS）对其进行自定义，而使用铁图标似乎是不可能的。最终，我们也希望过渡到使用SVG作为组件图标。

因此，要自定义组件图标，需要编写一个组件样式表，以在其中更改图标。您可以创建自己的图标字体，也可以使用CSS背景图片。后一种选择的缺点是无法轻松更改颜色，而无需交换整个图像。

作为示例，这是您为vaadin-date-picker组件编写的内容（假设这就是“日历”的意思）。

[part="toggle-button"]::before {
  content: ""; /* Remove the existing font based icon */
  background-image: url(...); /* data uri */
}

使用base64编码的数据uri，这样您就不必担心为图像使用相对路径还是绝对路径。

要在基于Flow的应用程序中使用该样式表，请将CSS文件放在应用程序的frontend文件夹中，然后添加以下内容：

@CssImport(value = "my-styles.css", themeFor="vaadin-date-picker")