Loosing my styles on PrimeNG update from 5 to 7

Question

Currently I'm trying to upgrade PrimeNG in my Angular 7 project from ^5.2.7 to ^7.1.3. After the update, when I'm running "ng serve", I'm getting errors related to dropdown and multiselect. To fix this it suggests to install @angular/cdk. But after doing this step, I'm getting my styles crashed, because @angular/cdk changes all classes starting from "fa" (for font awesome) to "pi" (primeicons). And also added some new styling, for example on "ui-dropdown" class. which makes lots of problem in a big project. Is there any way to prevent style and class changing while updating PrimeNG?

Thanks in advance.

Answer 1

the theme structure has been sine the version 6 new theme is added and old theme has been deprecated hand

style.scss (global style)

@import "primeicons/primeicons.css";
@import "primeng/resources/themes/nova-dark/theme.css";
@import "primeng/resources/primeng.min.css";

another way by set the style be angular.json file

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],

check the setup guide for version 7.x

previously primeng use to use font awesome version 4.x after version 5 the use primeicons internally and the give the option to use any icon library

you can install font awsome verion 5 like this

npm i @fortawesome/fontawesome-free@5

then you can import the style like this

@import "@fortawesome/fontawesome-free/css/all.css";