如何在Vaadin Flow中使用材质图标(14.6)

Question

我想在Vaadin 14.6应用程序中使用材质图标。我在这里找到了Lumo和Iron图标的食谱(默认(，但没有发现如何集成Material图标。如何才能做到这一点？

注意：该组件似乎不适用于Vaadin 14.x

Answer 1

基本上有三种方法。

1. 简单的方法

如果只使用几个图标。https://fonts.google.com/icons允许您将每个图标下载为svg或png文件。因此，您可以很容易地在Vaadin的Image组件中使用这些。

2. 轻方法，将其用作字体

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"；，因此设置CCD_ 2或CCD_ 3的文本内容并定义元素的css以使用素材字体图标。

span.getElement().getStyles().set("font-family","MaterialIcons");

3. 将其创建为附加包

如果您需要在多个项目中使用许多字体，那么这是值得的。

FontAwesome已经存在附加包。这很好地展示了如何构建这样的附加组件。替换字体资源很简单，需要做更多的工作来生成枚举的图标名称列表，这样就有了更直观的Java API来使用图标。中的字体似乎有标准的代码点文件https://github.com/google/material-design-icons/tree/master/font因此，可以使用与FontAwesome附加项目中类似的脚本。

https://github.com/FlowingCode/FontAwesomeIronIconset