When transitioning from one page to another, some icons do not transition, rather they just get cut-off by the page that is transitioning. See this screenshot, the gear at the top right of the first page is cut-off by the second page as it slides.
Example code to reproduce…
home.ts:
> import { Component } from ‘@angular/core’;
> import { TestPage } from './test';
> @Component({
> template: '<ion-header>\
> <ion-navbar>\
> <ion-title>Home</ion-title>\
> <ion-buttons end>\
> <button ion-button icon-only [navPush]="testPage">\
> <ion-icon name="md-settings"></ion-icon>\
> </button>\
> </ion-buttons>\
> </ion-navbar>\
> </ion-header>\
> <ion-content>home page</ion-content>',
> selector: 'page-home'
> })
> export class HomePage {
> testPage = TestPage;
> }
test.ts:
> import { Component } from ‘@angular/core’;
> import { Content } from 'ionic-angular';
> @Component({
> template: '<ion-header>\
> <ion-navbar>\
> <ion-title>test</ion-title>\
> </ion-navbar>\
> </ion-header>\
> <ion-content>test</ion-content>',
> selector: 'page-test'
> })
> export class TestPage {
> }