Ionic2:菜单按钮内的图标被剪切

Question

我导入一个示例应用程序(菜单)并在菜单中添加了带图标和文本的按钮:

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-item-divider></ion-item-divider>
      <button ion-item icon-left (click)="logout()">
        <ion-icon name="log-out"></ion-icon>
        Logout
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav #content [root]="rootPage"></ion-nav>

可悲的是,这导致了一个未完全显示的图标(我在Chrome中测试我的应用)

Answer 1

你必须在ion-icon使用属性item-left

 <ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-item-divider></ion-item-divider>
      <button ion-item icon-left (click)="logout()">
        <ion-icon item-left name="log-out"></ion-icon>
        Logout
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav #content [root]="rootPage"></ion-nav>