Is it possible to use this also somehow in HTML/designer/PolymerTemplate? W

Is it possible to use this also somehow in HTML/designer/PolymerTemplate?
When I install this with Maven, I can see no additional component in the designer; and there is no NPM install documentation here…

Hello.

Yes, it’s posible to use the addon with Designer, but there is no separate web-component for the icons since they are just iron-icon with a custom iconset.

In order to use the icons with Designer, you’ll need to import iron-icon and the corresponding iconset provided by this addon (fas.js, far.js or fab.js depending on whether the icon comes from the FontAwesome Regular, Solid or Brand)

What is currently NOT possible is to install the addon using npm, since the JS files are distributed in the JAR and extracted by vaadin. If you add the addon dependency in the pom file and then run mvn vaadin:prepare-frontend, it should extract the module so that it can be used as follow:

import '@polymer/iron-icon/iron-icon.js';
import '@vaadin/flow-frontend/font-awesome-iron-iconset/fab.js'; //or fas.js or far.js

<iron-icon icon="fab:font-awesome" style="width: 48px; height: 48px"></iron-icon>

I’ll create an issue in github for separating the client-side part as a proper npm dependency.

Regards

Hello, thank you very much for the advice!

I already have and use iron-icon (with the lumo icons) and that works perfectly in designer and templates.

Following your instructions, at first I didn’t get the include of the iconset to work.

After some mvn clean, vaadin:prepare-frontend and vaadin:build-frontend it works perfectly now.

Thank you very much!
18319898.png

Hello. We’ve just published a new version of this addon (2.1.0) that is based on the client-side sources published in https://www.npmjs.com/package/@flowingcode/font-awesome-iron-iconset
(The old dependencies from @vaadin/flow-frontend are still valid, and they import the corresponding file from @flowingcode/font-awesome-iron-iconset)