How to use Font Awesome icon in Jhipster React Project

Himanshu Pratap
1 min readAug 14, 2020

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">

--

--