Is there a way to assign custom icons to individual items in a list created with ngFor? Would it be more effective not to automatically generate the menu items?
app.html
<ion-menu [content]="mainContent">
<ion-content id="side-menu" style="background-color:#7A5258;">
<ion-list no-lines id="menu-list">
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon name="ios-bookmark"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
app.component.ts
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
pages: Array<{ title: string, component: any }>;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
// Customizing menu items for ngFor
this.pages = [
{title: 'Home', component: HomePage},
{title: 'Bookmarks', component: BookmarksPage},
{title: 'Help', component: HelpPage},
{title: 'Settings', component: SettingsPage},
];
}
openPage(page) {
this.nav.setRoot(page.component);
}
}