How to include own icon collection in Vaadin flow?

Question

How do you include your own icons in Vaadin Flow? Do you make an HTML file like this one from Vaadin Icons and include it via

@HtmlImport("frontend://path/to/your/icons.html")

I did not find any documentation so far. So I guess this is one possibility?

Answer 1

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.