问题描述
我想在 Vaadin 14.6 应用程序中使用 Material 图标。我找到了 Lumo 和 Iron 图标 here（默认）的配方，但没有发现如何集成 Material 图标。 怎样才能做到？
注意：这个 component 似乎不适用于 Vaadin 14.x
解决方法
基本上有三种方法可以做到这一点。
- 简单的方法
如果您只使用几个图标。 https://fonts.google.com/icons 允许您将每个图标下载为 svg 或 png 文件。因此，您可以轻松地在 Vaadin 的 Image 组件中使用它们。
- 轻量级方法，将其用作字体
Vaadin 网站上的培训视频描述了与应用程序的主题和样式相关的各种内容，时间戳 19:30 有一章关于如何配置自定义字体：
https://vaadin.com/learn/training/v14-theming
材质图标只是一种字体，您可以将其包含在您的项目中。
将 webfont 文件放在例如“src/main/webapp/fonts/MaterialIcons”（如果有Spring Boot jar打包项目注意位置不同）并导入生成的css
@StyleSheet("context://fonts/MaterialIcons/materialicons.css")
例如 materialicons.css 内容所在的位置：
@font-face {
font-family: 'MaterialIcons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),local('MaterialIcons-Regular'),url(MaterialIcons-Regular.woff2) format('woff2'),url(MaterialIcons-Regular.woff) format('woff'),url(MaterialIcons-Regular.ttf) format('truetype');
}
开发者体验不是最好的，因为您需要通过使用字符代码来使用图标，例如“搜索”图标接缝为“e8b6”等。因此设置{{1}的文本内容} 或 span 并定义元素的 css 以使用材料字体图标。
div- 将其创建为附加包
如果您需要在多个项目中使用许多字体，这值得付出努力。
已经存在 FontAwesome 的附加包。这很好地展示了如何构建此类附加组件。替换字体资源很简单，需要做更多的工作来为枚举生成图标名称列表，以便有更直观的 Java API 来使用图标。 https://github.com/google/material-design-icons/tree/master/font 中的字体似乎有标准代码点文件，因此可能可以使用与 FontAwesome 附加项目中类似的脚本。