ionic3 button按钮+带图标的按钮

1.普通按钮

<ion-content>
<button ion-button color="light" >Light Round</button>
<br>
<button ion-button >Primary Round</button>
<br>
<button ion-button color="secondary" >Secondary Round</button>
<br>
<button ion-button color="danger" >Danger Round</button>
<br>
<button ion-button color="dark" round>Dark Round</button>
<br>
<button ion-button color="danger"  class="button-block" >button-block</button>
<br>
<button ion-button small >small</button>
<button ion-button normal>normal</button>
<button ion-button large >large</button>
<br>
<button ion-button clear >clear</button>
<br>
<button ion-button outline >outline</button>
</ion-content>

2. 图标位置

<!-- Float the icon left -->
<button ion-button icon-left>
  <ion-icon name="home"></ion-icon>
  Left Icon
</button>

<!-- Float the icon right -->
<button ion-button icon-right>
  Right Icon
  <ion-icon name="home"></ion-icon>
</button>

<!-- Only icon (no text) -->
<button ion-button icon-only>
  <ion-icon name="home"></ion-icon>
</button>

3.多种图标

<button ion-button icon-left>
  <ion-icon name="star"></ion-icon>
  star
</button>

<button ion-button icon-left>
  <ion-icon name="settings"></ion-icon>
  settings
</button>

<button ion-button outline icon-start>
  <ion-icon name='briefcase' is-active="false"></ion-icon>
  Work
</button>
<button ion-button clear icon-start>
  <ion-icon name='beer' is-active="false"></ion-icon>
  Pub
</button>

<button ion-button color="secondary" icon-start>
  <ion-icon name='people'></ion-icon>
  Friends
</button>
<button ion-button color="secondary" outline icon-start>
  <ion-icon name='paw' is-active="false"></ion-icon>
  Best Friend
</button>

更多图标查看：

https://ionicframework.com/docs/ionicons/