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

Question

我想在 Vaadin 14.6 应用程序中使用 Material 图标。我找到了 Lumo 和 Iron 图标的配方 here（默认），但没有发现如何集成 Material 图标。如何实现？

注意：这个 component 似乎不能用于 Vaadin 14.x

Answer 1

基本上有三种方法。

简单的方法

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

轻巧的方法，将其用作字体

在 Vaadin 的网站上有培训视频，其中描述了与应用程序的主题和样式相关的各种内容，在 19:30 时间戳处有一章是关于如何配置自定义字体的：

https://vaadin.com/learn/training/v14-theming

Material图标只是一种字体，您可以将其包含在您的项目中。

将 webfont 文件放在例如"src/main/webapp/fonts/MaterialIcons"（如果有Springboot 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”等。因此设置文本内容 span 或 div 并定义元素的 css 以使用 material 字体图标。

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

将其创建为附加包

如果您需要在多个项目中使用许多字体，这值得付出努力。

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

https://github.com/FlowingCode/FontAwesomeIronIconset

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

How to use Material icons in Vaadin Flow (14.6)

google-material-icons

vaadin14