如何在侧面菜单的每个项目中添加自定义图标？答案

【问题标题】：How to add custom Icons in each item in side-menu?如何在侧面菜单的每个项目中添加自定义图标？
【发布时间】：2020-02-23 11:48:00
【问题描述】：

如何为侧菜单中的每个项目添加自定义图标。要使用的图像来自我的“assets/imgs/”目录，而不是来自 ionic 图标。

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' }
    ];

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

你可以用图片替换图标：

例如：组件.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 标签即可。

【讨论】：