Ion nav-bar button does not display on ios


#1

Hello, I am using Ionic 3 and my navbar menu has always worked fine for android and it does work on ios but the icon never shows on ios. (Also the navbar text is centered instead of to the left like android).

This is my code:

component:

@Component({
	selector: 'page-home',
	templateUrl: 'home.html'
})
export class HomeComponent {
	pages: Array<{title: string, component: any, icon: string, note: string, params?: any}>;
	constructor(
		private navController: NavController,
		private menuController: MenuController,
		private events: Events) {}

	ngOnInit() {
        this.pages = [
            { title: 'Profile', component: FirebaseHomeComponent, icon: 'contact', note: '' },
           Activities/Workouts', component: BarcodeScannerComponent, icon: 'bicycle', note: '' },

          { title: 'Contact', component: ContactComponent, icon: 'mail', note: '' }


	      
	    ];

	    this.events.subscribe('navigationEvent',(object) => {
	    	this.menuController.close();
				if (object.component) {
					this.navController.push(object.component, object.params);
				}
		});
	}

	openPage(page) {
		this.navController.push(page.component, page.params);
	}

html:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle icon-only>
      <ion-icon name='menu'></ion-icon>
    </button>
    <ion-title>{{'HOME' | translate}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home">
  
  <div  class="logo" >
    <img style="width:80px; height:80px" src="assets/img/logo.png" />
  </div>

Thank you!


#3

The icon doesn’t display, but the button is there and functioning.


#4

Fixed it by manually harcoding the color of the icon to black even though I didn’t have to for android sorry for disturbance