CODEWITHSUNDEEP
ionic-framework
Gabriel Augusto
Gabriel Augusto

Reputation: 37

Ionic - How can I add icons on sidemenu items?

I'm new to ionic 2, I created a sidemenu app with the ionic CLI and I have a few pages, but now I would like to add one different icon for each menu item, how can I do this?

Here is my app.html:

<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)">
        {{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>

In my app.components.ts I have these pages:

// used for an example of ngFor and navigation
this.pages = [
  { title: 'Estatísticas', component: "EstatisticasPage"},
  { title: 'Registrar vendas', component: "RegistrarVendasPage" },
  { title: 'Listar vendas', component: "VendasPage" },
  { title: 'Produtos', component: "ProdutosPage" },
  { title: 'Funcionários', component: "FuncionariosPage" },
  { title: 'Clientes', component: "ClientesPage" },
];

Upvotes: 1

Views: 1966

Answers (2)

ssebetta
ssebetta

Reputation: 19

@luisenrike has a good solution. Just to add to his, don't forget to add the icon type in app.component.ts, otherwise you may run into an error.

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

Upvotes: 0

user5085788
user5085788

Reputation:

You just need to add another property to the pages array and then use <ion-icon>.

this.pages = [
  { title: 'Estatísticas', component: "EstatisticasPage", icon: 'home' },
  ...
]

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

Upvotes: 1

Related Questions