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>

Answer 2

I got another solution.

First, in my component I modified the css file like that:

.sportiapp-size
{
    width: 24px;
    height: 24px;
}
.sportiapp-config 
{
    background-image: url("../../assets/Icon/config.png");
}

.sportiapp-calendar 
{
    background-image: url("../../assets/Icon/calendar.png");
}

After that, in the TS file I just refer the html

@Component({
    
    selector: '[app-menuitem]',
    styleUrls:["./app.menuitem.component.css"]
});

And Finally in the HTML file I only mentioned any of the css classes I created.

<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>

Being item.icom the correspondent value for css Class, In my case these values come from WebService. I was building a Menu.