Ionic_Adding New Icons
In this page we'll see where to find icons for our ionic2 app and how to use them. We'll also update our navigation drawer (menu) with new icons.
Ionic Framework provides a large set of icons, specially designed for each mobile platform (iOS, Android, and Windows Phone). You can easily use these icons with the following code:
<ion-icon name="alarm"></ion-icon>Using the icons in this way will make them adjust their style depending on the platform that your app is being run. However, you also override this and set the style for each platform explicitly:
<ion-icon ios="ios-alarm" md="md-alarm"></ion-icon>All icons will be black by default, however, you can change their colors very easily:
<ion-icon name="alarm" style="color:red"></ion-icon>The full list of available icons can be found at this link.
Now that we know where to find the icons, and how to use them, let's update our menu a little bit.
Firstly, let's break down the menu options into two sections: primaryPages and settingsPages. We'll do this in our app.js file.
this.primaryPages = [
{ title: 'My Profile', component: ProfilePage, icon: 'person' },
{ title: 'Contact', component: ContactPage, icon: 'people' }
];
this.settingsPages = [
{ title: 'Settings', component: Page1, icon: 'settings' },
{ title: 'Send Feedback', component: Page3, icon: 'send'}
];We'll also add another property to our menu option objects called icon, in which we'll define the icons that our menu options are going to have.
Next, we'll update the app.html page, which is our template that contains the code for menu rendering.
<ion-list no-lines>
<button ion-item *ngFor="let p of primaryPages" (click)="openPage(p)">
<ion-icon name="{{p.icon}}"></ion-icon>
{{p.title}}
</button>
<ion-item-divider style="min-height: 0px; padding:0px;"></ion-item-divider>
<button ion-item *ngFor="let p of settingsPages" (click)="openPage(p)">
<ion-icon name="{{p.icon}}"></ion-icon>
{{p.title}}
</button>
</ion-list>We added the no-lines attribute to the ion-list, because we don't want to show the separator lines between menu options. However, we do want to add a line that separates our primaryPages and our settingsPages. We do this with the ion-item-divider component. We also adjusted the styling of this divider component to end up with a horizontal line only.
Finally, inside our button component we are adding the ion-icon component, that uses the icon property to assign its name property, that specifies which icon to render for each menu option.
An item can contain text, images, and anything else. Generally it is placed in a list with other items. It can easily be swiped, deleted, reordered, edited, and more. An item is only required to be in a List if manipulating the item via gestures is required.
Setting the ion-item as an attribute to the button gives us the clickable item.
There is a lot of different usage variations for ion-item. The full documentation can be found here.
Finally, we need to update our application css to style our menu items a little bit. We are using the below code to give some separation between an icon and the label inside our menu items. We are also setting the icon color.
ion-menu{
ion-content{
ion-list{
ion-icon{
margin-right: 20px;
color: #595959;
}
}
}
}That's it. Finding and using icons inside ionic2 is very easy. Ionic Platform gives us a really large amount of ready made icons to use, and this list will probably grow further during the life and evolution of this platform.
