Как добавить пользовательские иконки в каждый пункт бокового меню?

Question

Как добавить пользовательские значки для каждого элемента в боковом меню. Используемое изображение из моего каталога assets / imgs /, а не из ионных значков.

app.html

    <ion-list no-lines class="ion-list" style="max-width: 100%;">
      <button style="color:rgb(65, 65, 65);"  class="title"  menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon style="font-size:30px;color: #B2B2B2;" class="icon" name="{{p.icon}}">&nbsp;&nbsp;</ion-icon>  <b>{{p.title}} </b> 
        <!-- <ion-icon style="float:right;" name="arrow-forward" *ngIf="p.title != 'Logout'"></ion-icon> -->
      </button>
    </ion-list>

app.component.ts

this.pages = [
      { title: 'Dashboard', component: HomePage, icon: 'home'} ,
      { title: 'Profile', component: ProfilePage, icon: 'contact' },
      { title: 'About Us', component: AboutUsPage, icon: 'help-circle' },
      { title: 'ContactUs', component: ContactUsPage, icon: 'call' },
      { title: 'SOA', component: SoaPage, icon: 'document' },
      { title: 'Feedback', component: FeedbackPage, icon: 'chatbubbles' },
      { title: 'Logout', component: SignInPage, icon: 'log-out' }
    ];

Answer 1

Вы можете заменить значки на изображения:

Например: component.ts

this.pages = [
      { title: 'Dashboard', component: HomePage, img: 'assets/imgs/image1.png'} ,
      { title: 'Profile', component: ProfilePage, img: 'assets/imgs/image2.png' },

    ];

component.html

<ion-list no-lines class="ion-list" style="max-width: 100%;">
      <button style="color:rgb(65, 65, 65);"  class="title"  menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <img style="width: 25px; height: 25px;" [src]="p.img">&nbsp;&nbsp;<b>{{p.title}} </b> 
        <!-- <ion-icon style="float:right;" name="arrow-forward" *ngIf="p.title != 'Logout'"></ion-icon> -->
      </button>
    </ion-list>

просто замените тег значка на imgтег.