更改Vaadin流中的组件图标

Question

如何用自己的图标替换Vaadin Flow组件（日历，上传等）中使用的图标？这可能吗？我在组件的应用编程接口中没有看到任何东西，看起来图标是字体图标，而不是通常的铁图标。

Answer 1

是的，组件图标是使用字体图标实现的。主要原因是，它们应该可以用一个主题（CSS）进行定制，这似乎不可能使用铁图标。最后，我们还希望将SVG用于组件图标。

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

作为一个例子，下面是您为vaadin日期选择器组件编写的内容（假设这就是您所说的“日历”）。

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

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

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

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