How to include own icon collection in Vaadin flow?
Here is an example of adding some IcoMoon icons to a Vaadin Flow App;
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,
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.
Copy the html file to your resources folder;
e.g. resources/META-INF/resources/frontend/styles/
And import that using
@HtmlImport
;e.g. @HtmlImport("frontend://styles/icomoon-iconset-svg.html")
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.
- The collection name is the name value in