CODEWITHSUNDEEP
ionic-frameworkionic3
frustrated-dev
frustrated-dev

Reputation: 451

How to add custom Icons in each item in side-menu?

How can I add custom icons for each item in side-menu. The image to use is from my 'assets/imgs/' directory and not from ionic icons.

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

Upvotes: 0

Views: 357

Answers (1)

Najam Us Saqib
Najam Us Saqib

Reputation: 3404

You can Replace icons with Images:

for Example: 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>

just Replace your icon tag with img tag.

Upvotes: 1

Related Questions