Comment définir l'icône dans le menu du panneau de navigation latéral dans l'application ionique 2

Question

J'essaie de définir des icônes sur le panneau de navigation latéral d'une application ionique2. Suggérez-moi comment procéder? Voici mon code:

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

 
rootPage: any = MysplashPage; 
 
    
 
private dashboardpage; 
 
private gradesubjectpage; 
 
private myhomepage; 
 
    
 
    
 

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

 
    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) { 
 
    this.initializeApp(); 
 
    \t this.pages = [ 
 
     { title: 'Explore', component: HomePage }, 
 
     { title: 'Dashboard', component: DashboardPage } 
 
\t ]; 
 
    } 
 

 
    initializeApp() { 
 
    this.platform.ready().then(() => { 
 
     this.statusBar.styleDefault(); 
 
    // this.splashScreen.hide(); 
 
    }); 
 
    } 
 

 
    openPage(pages) { 
 

 
    if(pages.component == HomePage){ 
 
     this.nav.setRoot(HomePage); 
 
    } else { 
 
     this.nav.push(pages.component); 
 
    } 
 
\t 
 
    } 
 
}

Ici, sur la page html je vais l'afficher à l'aide de la boucle, où dois-je utiliser les différentes icônes pour les éléments de menu dans le panneau de navigation latérale.

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

Answer 1

Vous allez ajouter une icône comme dans chaque liste, dans ce cas, puisque le contenu de la liste provient d'une variable et utilisée en ng-vous déclarerons l'icône dans votre objet.

app.component.ts:

this.pages = [ 
    { title: 'Explore', component: HomePage, icon: 'home' }, //OR THE ICON YOU WANT 
    { title: 'Dashboard', component: DashboardPage, icon: 'clipboard' } 
    ]; 
} 

Et dans votre HTML:

<ion-list> 
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
    <b>{{p.title}}</b> <ion-icon item-right name="{{p.icon}}"></ion-icon> 
    <!-- item-right attribute on ion-icon will push the icon to the for right --> 
    </button> 
</ion-list> 

Vérifiez here pour toutes les icônes disponibles.

Espérons que cela aide