Fonticons sample to work out-of-box

[syncro]

On custom icons related secion Fonticons setup sample uses only woff2 font format that doesn't work in with ligature names in browsers.

https://docs.jmix.io/jmix/flow-ui/icons/custom-icons.html#_example_adding_material_icons

This make it blocking for experts that are not familar with frontend technologies. More font format mappings are proposed to be added to make the sample ready to use. Here is the sample configuration from Matherial Icons documentation page: https://developers.google.com/fonts/docs/material_icons

@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(./MaterialIcons-Outlined.eot); /* For IE6-8 */
  src: local('Material Icons Outlined'),
    local('MaterialIcons-Outlined'),
    url(./MaterialIcons-Outlined.woff2) format('woff2'),
    url(./MaterialIcons-Outlined.woff) format('woff'),
    url(./MaterialIcons-Outlined.ttf) format('truetype');
}

Font files of all declared formats must be downloaded and placed into nearby CSS file.
or remote url import can be declared as follows:

@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Outlined&display=swap');

@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
}

There are Fontawesome samples on Vaadin documentation page that do similar tricks: https://vaadin.com/docs/next/components/icons#icon-fonts