Prime Icons are not showing in Angular 12

Question

I am using PrimeNG, PrimeIcons and Angular 12 in the same project and I have a problem.

When I open the project in FireFox, the Prime's icons aren't loading. In the picture, you can see the result.

Moreover, in the console, an error is displaying.

downloadable font: rejected by sanitizer (font-family: "primeicons" style:normal weight:400 stretch:100 src index:1)

I am using the following versions:

PrimeNG: 12.2.2
PrimeIcons: 5.0.0
Angular: 12.2.8

I have read the closed issues in the library and I see that it could be a Webpack problem. Next, I am going to paste the webpack code:

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default

module.exports = (angularWebpackConfig, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(angularWebpackConfig, options);

  singleSpaWebpackConfig.module.rules.push(
    {
      test: /\.(png|jpg|jpeg|gif)$/i,
      type: 'asset/inline',
    },
    {
      test: /\.(svg)$/i,
      type: 'asset/source',
    }
  );

  singleSpaWebpackConfig.externals = [
    /^@example\/*/,
    /^single-spa$/,

    /^rxjs$/,
    /^rxjs\/operators$/,
    
    /^zone\.js$/,

    /^i18next$/,
  ];
  
  return singleSpaWebpackConfig
}

The issues are:

I have tried the issues' answers but it still does not work. Can anyone help me?

Prime Icons are not showing in Angular 12

0 Answers0