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.