How to include own icon collection in Vaadin flow? - icons

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;
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.

Answer 2

update: starting from Vaadin 14 (except in Compatibility mode) you should instead use #JsModule. i.e. #JsModule("#polymer/iron-icon/iron-icon.js")

Answer 3

You can also create the icon collection manually.
I used https://github.com/vaadin/vaadin-icons/blob/master/iconset.html as a template (more or less):
Draw or download some SVG files.
Create a new SVG file myicons.svg that starts with
<iron-iconset-svg name="myiconset"><svg><defs>
... and ends with
</defs></svg></iron-iconset-svg>
Within the defs-tag you insert a "g" element for every graphic, e.g.:
<g id="myicon" viewBox="0 0 52 56"></g>
Set the id unique within this file.
Set viewBox attribute (visible dimensions) with the values from the original SVG file.
Copy the path element(s) from the original SVG file (and remove any "g" or "symbol" or "title" or whatever else elements that are no path/line/shape) and paste it/them into your newly created "g" elements.
<path d="m14 15h-13c-.55228475 [...]" />
Place this created myicons.svg file wherever you want it to be.
Within your Java code read that myicons.svg file and paste it in your site, e.g. in this direct way (and replace the path if you chose another one):
add(new Html(Files.readString(new File("src/main/webapp/img/myicons.svg").toPath())));
Create an icon:
com.vaadin.flow.component.icon.Icon myIcon = new Icon("myiconset", "myicon");
myIcon.getStyle().set("color", "var(--lumo-primary-text-color)");
add(myIcon);