upgrading font-awesome 4.7 to 5.11.1 angular 6 project

Question

In my angular 6 application, wherein the parent module uses font-awesome 4.7 as below in package.json;

"font-awesome": "^4.7.0",

angular.json;

"styles": ["projects/adminUI/src/styles.css",
          "./node_modules/font-awesome/css/font-awesome.min.css"],

Now my child module which is developed newly needs to have font-awesome icons of the 5.11.1 version, if I upgrade this to the new version, will there be any impact on existing icons in the parent application? Can anyone suggest if someone has done it before, any pointer would be highly appreciated?

Answer 1

NOTE: This is using FA 6.1.1 instead of 5.11.1.

It depends on how you are presenting the FontAwesome Icons.

If you use the FontAwesome Angular wrapper, then you wouldn't require anything in Angular.json.

All the code below is gleaned from FontAwesome's docs.

Example: In package.json: Use the appropriate NPM i for fonts needed.

"@fortawesome/angular-fontawesome": "^0.10.2",
"@fortawesome/fontawesome-pro": "^6.1.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",

In app.module.ts:

   import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

   imports: [
...
    FontAwesomeModule,
...
]

In a component.ts:

KEY POINT - IMPORT THE FONTS THAT YOU WILL USE IN THE COMPONENT!

import {
  faPlus, faXmark, faArrowDown, faArrowUp,
  faArrowLeft, faArrowRight, faCamera, faUserPen,
  faTrashCan, faArrowsUpDown, faAlignRight, faBarsStaggered
} from '@fortawesome/free-solid-svg-icons';


  faPlus = faPlus;
  faXmark = faXmark;
  faArrowDown = faArrowDown;
  faArrowUp = faArrowUp;
  faArrowLeft = faArrowLeft;
  faArrowRight = faArrowRight;
  faCamera = faCamera;
  faUserPen = faUserPen;
  faTrashCan = faTrashCan;
  faArrowsUpDown = faArrowsUpDown;
  faAlignRight = faAlignRight;
  faBarsStaggered = faBarsStaggered;

In a component.html:

 <fa-icon [icon]="faBarsStaggered" size="lg" [fixedWidth]="true"></fa-icon>