How to display icons in JHipster 5?

Question

I'm trying to add/change Font Awesome icon in JHipster 5 app. I can print only icons that already in default template.

I can change:

   <fa-icon [icon]="'home'"></fa-icon>
            <span>
                <span jhiTranslate="global.menu.home">Home</span>
            </span>

to:

<fa-icon [icon]="'asterisk'"></fa-icon>
                <span>
                    <span jhiTranslate="global.menu.home">Home</span>
                </span>

but can't change to

<fa-icon [icon]="'tv'"></fa-icon>
                <span>
                    <span jhiTranslate="global.menu.home">Home</span>
                </span>

or any other icon. Are they defined in some place?

Answer 1

Icons are in src/main/webapp/app/vendor.ts, here you can add new icons.

Answer 2

To complete Alexandre answer ;

Example to add the twitter icon :

(in "jhipsterVersion": "5.1.0")

read node_modules/@fortawesome/angular-fontawesome/README.md

1. yarn add @fortawesome/free-brands-svg-icons in src/main/webapp/app/vendor.ts

2. declare your icon :

.

import { faTwitter } from '@fortawesome/free-brands-svg-icons';
library.add(faTwitter);

3. in your html, use and don't forget to tell it is from fab (Brand)

.

<fa-icon [icon]="['fab', 'twitter']"></fa-icon>

4. Maybe you should also re-run webpack:build. But for me it worked directly

(see the top of of src/main/webapp/app/vendor.ts)

/* after changing this file run 'yarn run webpack:build' */