Custom Icons With Vaadin 14

To use custom icons with Vaadin 14+, please see How to use Material icons in Vaadin Flow (14.6). To embed SVGs as icons into your app, see Images and Icons.

  1. The SVG way is the easiest, just drop the svg file into src/main/webapp/my.svg then pass new Icon("my.svg") as an icon to any Vaadin component (e.g. button). The disadvantage of SVGs is that you can’t change their color easily
  2. To embed icon font see Custom Themes: Other Theme Assets then create a new Span() which looks like <span style='font-family: My Font'>&#e854;</span> to insert an add_shopping_cart icon from Google Icons.
  3. Do this VaadinIcons style, using iconset: see FontAwesomeIconSet sources for more details.
Written on April 19, 2022