How to add app-logo-image to primeng menubar?

Question

I followed https://www.primefaces.org/primeng/#/menubar which is good to display menu-items that can be passed as a list. My requirement is to add App related logo image to the top-left corner. Plz can someone advise how to make this work.

ngOnInit() {
        this.items = [
            {label: 'Chart', icon: 'fa-bar-chart', routerLink: 'charts'},

and my html looks as below

<p-menubar [model]="items"></p-menubar>

As am just passing items as an array, may I know how to display app-logo-image.

Answer 1

This should help

<p-menubar [model]="items">
  <ng-template pTemplate="start">
    <img src="/assets/images/logo.png" height="40" class="p-mr-2" alt="brand logo">
  </ng-template>
  <ng-template pTemplate="end">
    <label>
      <input type="text" pInputText placeholder="Szukaj">
    </label>
    <button type="button" (click)="logout()" pButton label="Wyloguj" icon="pi pi-power-off" style="margin-left:.25em"></button>
  </ng-template>
</p-menubar>

Answer 2

What you can do is to add Custom Content :

Custom content can be placed between p-menubar tags.

---

Insert your logo image :

<p-menubar [model]="items">
    <img id="logo" src="https://www.primefaces.org/wp-content/uploads/fbrfg/favicon-32x32.png"/>        
</p-menubar>

Then, with a few lines of CSS, add a padding-left to the menu items and position your logo to the left :

.ui-menubar-root-list {
  padding-left:32px;
}

img#logo {
  position:absolute;
  left:0;
}

Demo

Answer 3

This worked for me. I used @Antikhippe's solution but changed scss little bit and it worked.

::ng-deep.ui-menubar .ui-menubar-root-list{
    padding-left: 13em !important;
    }
    img#logo {
      position:absolute;
      left:0;
    }