How to include other Icon-Sets with npm in Vaadin 14+

Flow
1

Hello guys,

in Vaadin 10-13 I used an selfcreated Enum “IcoMoon” to create Icons (Like with VaadinIcons).
The Enum imported a svg and used Iron-Icons to display it then.
With Vaadin 14 this doesnt work anymore. There where some bower imports and i know that there is a “bower mode”, but i want to know how it should work with npm. Iam using plain Java with as little selfcreated html/css/js as possible.

Has anyone a solution for me? :slight_smile:

Best regards
Marcus

2

bower imports won’t work anymore for sure.

You should migrate your bower packages to npm packages and use JS module imports.

You will need a custom js module I believe to make it work.

3

Denis Anisimov:
bower imports won’t work anymore for sure.

You should migrate your bower packages to npm packages and use JS module imports.

You will need a custom js module I believe to make it work.

Thanks for your reply.
Yes i already tried that. I installed icomoon and iron-icons via npm and imported them via JsModule but i do not get it to work.
Are there any examples how to import and use other icon-sets?

4

No, I don’t think there is anything about icon-sets.
I would recommend to it in the same way as vaadin-icons does.
Can’t suggest anything better without deep investigation.

5

Denis Anisimov:
No, I don’t think there is anything about icon-sets.
I would recommend to it in the same way as vaadin-icons does.
Can’t suggest anything better without deep investigation.

Well not quite sure what i did wrong in the first place, but i solved it for now.

I attached a js file for anyone else who wants to use some IcoMoon-Icons.
Just import the file with the @JsModule annotation and create an Icon with the collectionname: “icomoon”.
Other option would be to use the Enum that is attached.

Best regards
17773305.js (309 KB)
17773308.java (13.8 KB)

6

@Marcus Merten, Thank you so much.
I was looking for this solution, past couple of days.
It worked perfectly.

7

B"H

Hi

I’m tring this method with no success yet. the only difference I have is that my SVG file is different

e.g. <glyph unicode=“” glyph-name=“Active”.,…

and not the structure I see in your example.

I do use icomoon, so what do I miss?

Thanks

found it. generate icomoon by tic the polymer option create the svg that fits the example above.
Thanks