ion-icon使用自定義圖片

系統(tǒng)已經(jīng)提供了很多icon圖標，見http://ionicframework.com/docs/v2/ionicons/
但是如果使用自己的圖片，按照以下的方式，在********全局********SASS文件里加入：

.ion-${platform}-${iconName} {
   content: '${imagePath}'
}

上例中，

• ${platform}替換成對應(yīng)的ios、md
• ${iconName}圖片的名稱，對應(yīng)的是ion-icon標簽里的name屬性
• ${imagePath}即圖片的名稱
  使用起來就比較簡單了，跟使用系統(tǒng)原生的一樣，name屬性賦值上例中的${iconName}

ion-tab使用自定義圖片

未選中狀態(tài)下：

.ion-${platform}-${iconName} {
   content: '${imagePath}'
}

選中狀態(tài)下：

.ion-${platform}-${iconName}-outline {
   content: '${imagePath}'
   // 其它的一些屬性設(shè)置
}

使用的時候，tabIcon屬性直接賦值上面命名的${iconName}
------修改于2016.12.20
發(fā)現(xiàn)在android環(huán)境下，-outline無效，參照網(wǎng)上的資料，經(jīng)驗證如下方案可行：
未選中狀態(tài):

.ion-md-${iconName} {
   content: '${normalImagePath}'
}

選中狀態(tài)需要加到 .tabs-md .tab-button[aria-selected=true]下，如：

.tabs-md .tab-button[aria-selected=true] {
  .ion-md-${iconName} {
     content: '${selectedImagePath}'
  }
}

其它的也一樣，加進去即可，不需要添加-outline