css - How put img or svg insted icons on Primng components?

Question

This is a component model on Primeng page https://primefaces.org/primeng/showcase/#/menu.

If put it isn't possible, Could Transform the Svg or Img to the icon and put it in the style? and How put it Inline the style of the component?

Thank you.

Answer 1

scss file:

:host ::ng-deep {
    .custom-icon {
        width: 1rem;
        height: 1rem;
        background-image: url("assets/images/custom-icon.svg");
    }
}

the ng-deep is necessary since the icon is placed deep within the primeng component

ts:

    items: MenuItem[];

    ngOnInit() {
        this.items = [
            {label: 'New', icon: 'custom-icon'},
        ];
    }

you can also use them in html, like

<p-tabPanel leftIcon="custom-icon">
   ...
</p-tabPanel>

EDIT If you want to use multiple different ones, you could do something general like this: scss file:

:host ::ng-deep {
    .c-icons {
        width: 1rem;
        height: 1rem;
     }
     
    .first-icon {
        background-image: url("assets/images/first-custom-icon.svg");
    }
     
    .second-icon {
        background-image: url("assets/images/second-custom-icon.svg");
    }
}

and then use like :

{label: 'New', icon: 'c-icons first-icon'},
{label: 'Other', icon: 'c-icons second-icon'}

or

<p-tabPanel leftIcon="c-icons first-icon">
   ...
</p-tabPanel>

<p-tabPanel leftIcon="c-icons second-icon">
   ...
</p-tabPanel>