Search code examples
angularprimengprimeicons

Primeicon style is not loading in collapsible row group table data in angular

I have an Angular 12 project. I have installed PrimeNG controls version 11.4.4. In my form I would like to have a table with collapsible row group data. The table is working fine. But the problem is collapsible row group icon is not showing or loading. I have already installed Primeicon and in angular.json I have used the below code:

"src/styles.css",
              "node_modules/primeng/resources/themes/saga-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeflex/primeflex.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/quill/dist/quill.snow.css"

But the icon is not loading. The problem is: enter image description here

Here is my GitHub Repo

Solution

  • In your app.module add the following to fix the icons issue

    import { ButtonModule } from 'primeng/button';
 imports: [
    ButtonModule,
    ],

    Also, there are some errors in console regarding the css files, remove these files from index.html, as these are already included in angular.json file

    <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nove-light/theme.css">
  <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css">
  <link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css">