6图标：icon

Posted 2020-07-21 淡定君

1、图标

/* ---html----*/
 
<ion-content text-center class="icons-basic-page">
 
  <ion-row>
    <ion-col><ion-icon name=\'ionic\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'logo-angular\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'ionitron\'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=\'heart\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'apps\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'happy\'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=\'people\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'person\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'contact\'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=\'lock\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'key\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'unlock\'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=\'map\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'navigate\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'pin\'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=\'mic\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'musical-notes\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'volume-up\'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=\'cafe\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'calculator\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'bus\'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=\'camera\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'cube\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'image\'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=\'star\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'wine\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'pin\'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=\'arrow-back\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'arrow-dropdown\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'arrow-forward\'></ion-icon></ion-col>
  </ion-row>
 
  <ion-row>
    <ion-col><ion-icon name=\'sunny\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'umbrella\'></ion-icon></ion-col>
    <ion-col><ion-icon name=\'rainy\'></ion-icon></ion-col>
  </ion-row>
 
</ion-content>
 
/* ---html----*/

当然可以使用 平台特定 图标

<ion-icon ios="logo-apple" md="logo-android"></ion-icon>

是 ios 的时候显示 ios的图标 ， 别的则显示 Android的图标

 

变量的图标： 使用一个变量设置一个图标：

<ion-icon [name]="myIcon"></ion-icon>

export class MyFirstPage {
 
  myIcon: string = "home";
 
}