Toggle Menu icons

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

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

<ion-menu [content]="content">

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


<!-- 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

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}}

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

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

The conference app has this exact functionality.

1 Like