How to use Font Awesome icon in Jhipster React Project

Jhipster React project uses font awesome icon by default. If you want to use a Font Awesome icon in the project, follow these steps:

Modify app/config/icon-loader.ts at appropriate places.
Say, you want to add an upload icon.

1. Add import statement for the icon.

import {faUpload} from '@fortawesome/free-solid-svg-icons/faUpload';

2. Export the imported icon

export const loadIcons = () => {
  library.add(
    faSort,
    faEye,
    faSync,
    faBan,
    .
    .
    .
    faTimesCircle,
    faSearch,
    faUpload
  );
};

3. Icon usage in a react file , example

a. Add the import statement

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

b. Use the icon .
Say, we want to use the icon for menu items.

<MenuItem icon="upload" to="/upload">