Ionic - how to add icons to the side menu items

Ionic Framework ionic-v3
#1

Hello,

I know this might be a really basic question but i’m getting started with ionic2 and a bit stumped…

I have built an app using the sidemenu starter template, added a few pages, but I want to make my sidemenu look nicer with some nice ionicons. But I simply cannot figure it out and googling is getting me nowhere.

Here is snippet from my app.html:

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

And here is the pages object this menu is driven off from app.component.ts

this.pages = [
  { title: 'Home', component: TabsPage },
  { title: 'Profile', component: ProfilePage },
  { title: 'Feedback', component: FeedbackPage },
];

How can I add icons to each menu item? Or point me to an example?

Thank you in advance!

6 Likes
#2

Hello, have you tried something like this?
You can insert the button inside the ion-item or change the ion-item style to be your button.

<ion-content>
      <ion-list>
        <ion-item class="item-icon-left" menu-close ng-click="login()">
          <i class="ion-star"></i> Login
        </ion-item>
      </ion-list>
</ion-content>

it works for me :slight_smile:

#3

Thanks for response Pedro, but I can see a couple of problems

  1. your example looks like ionic/angular 1 … i am working with ionic2
  2. I cannot figure out how to display a working menu item button without using the pages array. If i could hard-code each menu item that would be great, but i need an example because i can’t get it working
#4

I see, I’ll make a dummy Ionic 2 project right now and try to work it out.

1 Like
#5

Ok, so the first thing I tried was making rows and cols using the grid system. Didn’t work.
Tried using the item-icon-left class and didn’t work either…

So I went simple:

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

You can style it to make it look nicer, it’s one way to do it.

Now [quote=“chazwoza, post:3, topic:74654”]
I cannot figure out how to display a working menu item button without using the pages array. If i could hard-code each menu item that would be great, but i need an example because i can’t get it working
[/quote]

You can do it like this:

<ion-list>
  <ion-item>
    <button menuClose ion-item (click)="myCustomFunction(1)">
      <ion-icon name="add-circle"></ion-icon> My custom page 1
    </button>
    <button menuClose ion-item (click)="myCustomFunction(2)">
      <ion-icon name="add-circle"></ion-icon> My custom page 2
    </button>
    <button menuClose ion-item (click)="myCustomFunction(3)">
      <ion-icon name="add-circle"></ion-icon> My custom page 3
    </button>
  </ion-item>
</ion-list>

First time messing with Ionic 2, maybe this is not the optimal way. But you can start from here I guess.

#6

Ok seem to have it working like this below, small variation of what you suggested.

app.component.ts:

export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = TabsPage;

  pages: Array<{title: string, component: any}>;
  pages2: any;

  constructor(public platform: Platform) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: TabsPage },
      { title: 'Profile', component: ProfilePage },
      { title: 'Feedback', component: FeedbackPage },
    ];

    this.pages2 = {
      profilePage: ProfilePage,
      homePage: TabsPage,
      feedbackPage: FeedbackPage,
    } 
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
      this.auth.startupTokenRefresh();

    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }

}

app.html:

  <button menuClose ion-item icon-left (click)="nav.setRoot(pages2.homePage)">
    <ion-icon name="home"></ion-icon>
    Home
  </button>
  <button menuClose ion-item icon-left (click)="nav.setRoot(pages2.profilePage)">
    <ion-icon name="person"></ion-icon>
    Profile
  </button>
  <button menuClose ion-item icon-left (click)="nav.setRoot(pages2.paymentPage)">
    <ion-icon name="cash"></ion-icon>
    Payment
  </button>
#7

Good job, glad it worked.

#8

This is what I have:

<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 [name]="p.icon" item-left></ion-icon>
        {{ p.name }}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>
14 Likes
#9

Nice - so you just extended your pages object like this:

pages: Array<{title: string, component: any, icon: string}>;

example:
this.pages = [ { title: 'Home', component: TabsPage, icon: "home" ...
This is a nice clean example and seems to be working! Thanks :slight_smile:

6 Likes
#10

Yes, but I also have a NavigationProvider that I use for the menu and also for the DeepLink configuration. It contains the definitions for pages.

#11

Hello Chazwoza, mine is just displaying a string not an icon. how did you go about it? Thanks

#12

It has worked. Thank you

1 Like
#13

How to add custom icons to menu. I have seen that only Ionic icons can set as menu. I need to add custom icons for the menu can you please help.

#14

Hi,

I am newly try to start in Ionic. I have seen In Ionic 2 only the default icons can use. Is there any way to add my custom icons or images for side menu template table view lists.

Thanks

1 Like
#15

hi this code error
this.pages error

please replay

image
22.PNG1340×415 47 KB

#16

Add icons to other elements.
El array es de tres elementos title,component e icono, agregale un icono a los demas elementos.

this.pages = [

  { title: 'Inicio', component: Inicio, icon: "home"},
  { title: 'perfil', component: Perfil, icon: "person" },
  { title: 'Cerar Sesion', component: Login, icon: "power" },
];
1 Like
#17

Thank you, It’s work

#18

It has working thank u…

#19

I have also the same query can we add custom icons or images in the side menu?

#20

Yes you can use like this.

  <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
    <img class="menuIcon" src="assets/icon/transportation.png">
    {{p.title}}
  </button>
2 Likes