How to use Material icons inside Version 17 PrimeNG components & Version 17 Angular (Over-ride...

How do i use Material icons inside Version 17 PrimeNG components & Version 17 Angular (Over-ride PrimeNG's internal limited icons) ???

I watched this youtube video of Official PrimeNG Video link

But it wasnt clear and i tried it then got this result Photo of rendering

This was the HTML tag that got rendered:

<span class="p-menuitem-icon description" ng-reflect-ng-class="description">::before</span>

If you see inside the class it has,

"p-menuitem-icon" (The icon from PrimeNG) and also

"description" (The icon from Material Icon)

If i inspect the element and remove the "p-menuitem-icon" part then even the "description" part is leaving.

before u ask if i added the link ,Yes i did add

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


in the index.html

also this is my style.scss :

@import "primeicons/primeicons.css";

.p-menuitem-icon:not([class*="pi-"]) {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 0; // Hide the base text
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;

&::before {
content: attr(class);
font-size: 24px; // Restore size for the icon
display: inline-block;
}
}


same from video !!

Question: How do i remove the "p-menuitem-icon" and only have the "description" icon rendered ???

Continue reading...