How to include own icon collection in Vaadin flow?

Here is an example of adding some IcoMoon icons to a Vaadin Flow App;

  1. Using the notes in https://icomoon.io/docs.html under the section 'Generating Icons in SVG & More', I generated the Polymer compatible icon set in iron-iconset-svg format.

    • Visit https://icomoon.io/app/ and select the icons (you can add icons from different libraries),
    • click on 'Generate SVG & More',
    • click on 'Preferences' and select Polymer as the target format and download,
  2. Extract the zip file, and open the polymer folder. It contains the *-svg.html file which is the 'iron-iconset-svg' format file that @Jouni is talking about in the above note. This html file is actually a collection of inline SVGs.

  3. Copy the html file to your resources folder;

    e.g. resources/META-INF/resources/frontend/styles/

  4. And import that using @HtmlImport;

    e.g. @HtmlImport("frontend://styles/icomoon-iconset-svg.html")

  5. Then you can create icons using the collection name and the icon name;

    Icon icon = new Icon("icomoon", "mobile");

    • The collection name is the name value in <iron-iconset-svg name=... in the html file.