ionic2离子头在Android模拟器上显示不佳

Question

我在标题中创建了一个简单的离子导航栏。我有3个按钮。当我在浏览器上运行它时，它运行正常。但是，如果我在模拟器上测试它，它看起来像第二个图像。 这可能是标题：

＆＃13;

＆＃13;

<ion-header>
<ion-navbar color="leo">
<button ion-button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ appName }}</ion-title>
<ion-buttons end >
<button ion-button (click)="goContactPage()" >
<ion-icon name="chatboxes"></ion-icon>
</button>
<button ion-button (click)="presentPopover($event)"> 
<ion-badge *ngFor="let n of nbr" color="danger" >{{n.total}}</ion-badge> 
</button>
<button ion-button (click)="goAbout()" >
<ion-icon name="calendar"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

<button ion-button  icon-only menuToggle  >
  <ion-icon name="menu"></ion-icon>
 </button>

<ion-segment [(ngModel)]="icons" color="secondary">
  <ion-segment-button (click)="goContactPage()">
    <ion-icon name="chatboxes"></ion-icon>
  </ion-segment-button>

 <ion-segment-button (click)="goAbout()">
    <ion-icon name="calendar"></ion-icon>
  </ion-segment-button>

  <ion-segment-button (click)="presentPopover($event)">
   <ion-badge   *ngFor="let n of nbr" color="danger" >{{n.total}}</ion-badge> 
  </ion-segment-button>





</ion-segment>