在 Vaadin Flow 中更改组件图标答案

【问题标题】：Change component icons in Vaadin Flow在 Vaadin Flow 中更改组件图标
【发布时间】：2020-04-20 19:37:38
【问题描述】：

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

【问题讨论】：

【解决方案1】：

是的，组件图标是使用字体图标实现的。主要原因是它们应该可以使用主题 (CSS) 进行自定义，而使用 iron-icon 似乎是不可能的。最终，我们也希望过渡到对组件图标使用 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")

【讨论】：