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>