How to use Material icons in Vaadin Flow (14.6) - google-material-icons

Question

I'd like to use Material icons in a Vaadin 14.6 application. I found recipes for Lumo and Iron icons here (the default), but did not discover how to integrate Material icons.
How can that be accomplished?
NB: This component seems to be not usable for Vaadin 14.x

Answer 1

There are basically three approaches to this.
Easy approach
If you use only few icons. https://fonts.google.com/icons allows you to download each icon as svg or png file. So you can easily use those in Image component of Vaadin.
Light approach, use it as a font
There is training video at Vaadin's site which describes various things related to theming and styling of the app, at 19:30 timestamp there is a chapter about how to configure custom font:
https://vaadin.com/learn/training/v14-theming
Material icons are just a font, which you can include in your project.
Place the webfont files under e.g. "src/main/webapp/fonts/MaterialIcons" (note location is different if you have Spring Boot jar packaged project) and import the generated css
#StyleSheet("context://fonts/MaterialIcons/materialicons.css")
Where materialicons.css content is for example:
#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');
}
The developer experience is not the nicest possible, as you need to use the icons by using character codes, like for example "search" icons seams to be "e8b6", etc. So set text content of a span or div and define css of the element to use the material font icon.
span.getElement().getStyles().set("font-family","MaterialIcons");
Create it as add-on package
This is worth of effort if you need to use many of the fonts in multiple projects.
There already exists add-on package for FontAwesome. This gives a good showcase how to built such add-ons. Replacing font resources is straightforward, more work is needed to generate the list of icon names for the enum, so that there is a more intuitive Java API to use the icons. There seems to be standard codepoints files for the font in https://github.com/google/material-design-icons/tree/master/font So similar script as in the FontAwesome add-on project can probably be used.
https://github.com/FlowingCode/FontAwesomeIronIconset