在 Vaadin Flow 中更改组件图标

Question

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

Answer 1

是的，组件图标是使用字体图标实现的。主要原因是它们应该可以使用主题 (CSS) 进行自定义，这似乎无法使用 iron-icon。最终我们也希望过渡到使用 SVG 作为组件图标。

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

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

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

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

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

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

Change component icons in Vaadin Flow