Toggle Menu icons

Ionic Framework ionic-v3
1

I am new and its my first app ever in Ionic2, i am using toggle sidemenu. Now i want to add beautiful icons to each item list in my toggle menu. as i have item list: settings, working hours, information, department etc.

Please help me to get this solve
Thanks in advance

2

Please provide us the code you have for the sidemenu at this point, so we can see what you’ve already tried.

3 
<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages"  (click)="openPage(p)">
        <ion-icon item-left [name]="person"></ion-icon> {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

It is the app.html file, you can see in line number 11, i used icons but its showing only one icon to all. i want to show each list a different icon

4

You mean you want to show a different icon in front of each button I suppose. I’m guessing you’re only seeing icons of a person atm :laughing: Okay. [quote=“baloch92, post:3, topic:88336”]
<button menuClose ion-item *ngFor=“let p of pages” (click)=“openPage§”>
<ion-icon item-left [name]=“person”></ion-icon> {{p.title}}
</button>
[/quote]

If you look at that, you’re looping over pages. These pages are defined within your app.component. It corresponds with the names and components you’ve set over there. Now, your ion-icon is bound to person. So nothing ‘dynamic’ is happening in there. Instead, bind ion-icon to p.icon and define the icon off your choosing in the pagelist on your app.component.

1 Like
5

can you send me as a sample how to do it? please its an humbly request

6

The conference app has this exact functionality.

1 Like