ion-icon tabIcon 使用自定义图片

ion-icon使用自定义图片

系统已经提供了很多icon图标，见http://ionicframework.com/docs/v2/ionicons/
但是如果使用自己的图片，按照以下的方式，在********全局********SASS文件里加入：

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

上例中，

• ${platform}替换成对应的ios、md
• ${iconName}图片的名称，对应的是ion-icon标签里的name属性
• ${imagePath}即图片的名称
  使用起来就比较简单了，跟使用系统原生的一样，name属性赋值上例中的${iconName}

ion-tab使用自定义图片

未选中状态下：

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

选中状态下：

.ion-${platform}-${iconName}-outline {
   content: '${imagePath}'
   // 其它的一些属性设置
}

使用的时候，tabIcon属性直接赋值上面命名的${iconName}
------修改于2016.12.20
发现在android环境下，-outline无效，参照网上的资料，经验证如下方案可行：
未选中状态:

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

选中状态需要加到 .tabs-md .tab-button[aria-selected=true]下，如：

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

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