6. Icons: Icon

1. Icons

/*---HTML----*/<ion-content text-center class= "Icons-basic-page" > <ion-row> <ion-col><ion-ico n name= ' ionic ' ></ion-icon></ion-col> <ion-col><ion-icon name= ' logo-angular ' ></  ion-icon></ion-col> <ion-col><ion-icon name= ' Ionitron ' ></ion-icon></ion-col> </ion-row> <ion-row> <ion-col><ion-icon name= ' Heart ' ></ion-icon></ion-col> &lt ; Ion-col><ion-icon name= ' apps ' ></ion-icon></ion-col> <ion-col><ion-icon name= ' happy ' ></ion-icon></ion-col> </ion-row> <ion-row> <ion-col><ion-icon name= ' People ' & gt;</ion-icon></ion-col> <ion-col><ion-icon name= ' person ' ></ion-icon></ion-col > <ion-col><ion-icon name= ' contact ' ></ion-icon></ion-col> </ion-row> <ion-row&    Gt <ion-col><ion-icon name= ' Lock ' ></ion-icon></ion-col> <ion-col><ion-icon name= ' key ' ></ion-icon></ion-col> <ion-col> <ion-icon name= ' unlock ' ></ion-icon></ion-col> </ion-row> <ion-row> <ion-col>& Lt;ion-icon name= ' map ' ></ion-icon></ion-col> <ion-col><ion-icon name= ' navigate ' ></ ion-icon></ion-col> <ion-col><ion-icon name= ' pin ' ></ion-icon></ion-col> </ ion-row> <ion-row> <ion-col><ion-icon name= ' mic ' ></ion-icon></ion-col> <ion-co L><ion-icon name= ' musical-notes ' ></ion-icon></ion-col> <ion-col><ion-icon name= ' Volume-up ' ></ion-icon></ion-col> </ion-row> <ion-row> <ion-col><ion-icon name= ' Cafe ' ></ion-icon></ion-col> <ion-col><ion-icon name= ' calculator ' ></ion-icon> </ion-col> <ion-col><ion-icon name= ' bus ' ></ion-icon></ion-col> </ion-row> <ion-row> <ion-col><ion-icon name= ' camera ' ></ ion-icon></ion-col> <ion-col><ion-icon name= ' cube ' ></ion-icon></ion-col> < Ion-col><ion-icon name= ' image ' ></ion-icon></ion-col> </ion-row> <ion-row> < Ion-col><ion-icon name= ' star ' ></ion-icon></ion-col> <ion-col><ion-icon name= ' wine ' ></ion-icon></ion-col> <ion-col><ion-icon name= ' pin ' ></ion-icon></ion-col > </ion-row> <ion-row> <ion-col><ion-icon name= ' Arrow-back ' ></ion-icon></ ion-col> <ion-col><ion-icon name= ' Arrow-dropdown ' ></ion-icon></ion-col> <ion-col ><ion-icon name= ' Arrow-forward ' ></ion-icon></ion-col> </ion-row> <ion-row> < Ion-col><ion-icon name= ' Sunny ' &GT;&LT;/ION-ICON&GT;&LT;/ION-COL&GT <ion-col><ion-icon name= ' umbrella ' ></ion-icon></ion-col> <ion-col><ion-icon name = ' rainy ' ></ion-icon></ion-col> </ion-row> </ion-content>/ *---HTML----* /

Of course, you can use platform-specific icons

<ion-icon ios="logo-apple" md="logo-android"></ion-icon>

iOS is an icon that displays an icon for Android, and another icon for the icons of the image: use a variable to set an icon:

<ion-icon [name]="myIcon"></ion-icon>

Export class Myfirstpage {   = "Home";}

6. Icons: Icon