What is causing certain Primeng icons to change into SVG format and create new tags in the DOM?

Question

Some of the Primeng icons are having issues where they are being converted to SVG and a similar tag is being created in the DOM. What is causing this problem?

enter image description here

What I expect:enter image description here

Answer 1

One way is to explicitly disable SVG conversion for these icons by adding the following code to your project:

.ui-icon {
  background-image: none !important;
}

Another way is to try updating your CSS to target only specific elements and avoid conflicting with the PrimeNG icons. Like modifying specific div or span. example

.my-icon-class {
  background-image: url('path/to/icon.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

This code will create a custom icon class that uses an SVG file as the background image. Then add this class to display icon

<div class="my-icon-class"></div>