在项目几乎都会用到了矢量图标icon,我先来说说ionic官网icon图标,官网的图标使用起来很方便，直接用标签引用就好了，如下图
ionic官网图标的2中使用方法
但是ionic2官方给的图标很有限，当我们想用的图标官网没有时，就需要我们去使用自定义的图标了，使用自定义的图标有两种，一种是使用阿里巴巴矢量图标库的图标，另一种是用svg小图片转换图标文件使用。下面我就来介绍这两种图标应用方式在ionic2/3的项目中怎么实现。
1、ionic2使用阿里巴巴矢量图标库图标
首先进入阿里图标库官网，用gitHub账号或者新浪微博登录，然后找我们项目中想要用的图标并加入购物车，现在有两种方法去引用你选中的图标
（一）方法一： 下载字体文件到本地的方法
打开购物车，点击下载代码，如下图
下载字体文件到本地
然后在本地找到刚才下载的文件并解压、打开，选中以.eot、.svg、.ttf、.woff为后缀的文件复制到项目中assets文件夹下新建的fonts文件夹中，然后打开样式文件iconfont.css，复制其内容到theme文件夹下新建的icons.scss文件中，详细操作请见下图
添加字体文件到项目中
按照上图操作完得到的是这样的↓
修改前
下面我们来对icons.scss文件中样式代码进行修改，如下图
修改1
修改完成后是这样的↓
下面我们就来进行改名，改成自己能理解的能一看名字就知道是那个图标的名字（注意：取名字时不能与ionic官方的图标重名），一般的我会取 my-××× 或者项目英文缩写加名字，这样就避免了与官方图标重名。
双击demo_unicode.html文件在浏览器打开，操作如下图
双击选中的文件
浏览器中的图标详细内容
看到浏览器中的图标详情，就知道icons.scss文件中那个名字对应那个图标了，现在就开始改名字和tabs图标样式了，tabs图标分选中状态图标和未选中状态图标两种，我们要改为ionic能认识的样式才能用，下图是改好后的截图
改名后的
现在我们要去src/theme文件夹下的variables.scss文件中加入这行代码 @import "./icons"; ，将我们刚才编辑的文件引入全局。这一步很重要！！！
到这里就大功告成了，直接html种引用就好了。引用方式同官网图标使用方法一样，如下图
html中直接引用
效果展示
效果展示outline状态
这种方法比较好用，我们单独的建了一个icons.scss文件来放icon样式，这样与其他的样式文件互不干扰，方便管理。
（二）方法二： 下载png图片素材到本地进行图标转换的方法
在阿里图标库选好自己想要的图标加入购物车，在购物车中点击下载素材，操作如下图
下载素材
素材基本设置
把png图复制到项目中
打开 src/theme文件夹下的variables.scss文件，去编辑icon样式，
编辑图标样式
样式代码如下：
.ion-ios-my-xl:before { content: url("../assets/fonts/png/xiaolian1.png"); }
.ion-ios-my-xl-outline:before { content: url("../assets/fonts/png/xiaolian2.png"); }
.tab-button[aria-selected=true] .ion-md-my-xl:before { content: url("../assets/fonts/png/xiaolian1.png"); }
.tab-button[aria-selected=false] .ion-md-my-xl:before { content: url("../assets/fonts/png/xiaolian2.png");}
到这里也大功告成了，现在去html中引用一下，看一下效果
html中引用
效果展示
以上是我使用过的引用阿里巴巴矢量图标库图标的两种方法，个人比较喜欢第一种。
2、ionic2使用自定义svg图标
准备好项目需要的图标的svg图(ui会提供的)，如下图所示
准备好svg图片
然后进入到国外的一个svg图片制作图标的网站（https://icomoon.io/），需要注意的是这是一个外网，可能需要翻墙，然后点击首页右上角的 icoMoon App,如下图所示：
看图操作
导入svg图生成字体文件
导出字体文件
设置字体文件
把下载到本地字体文件中的fonts文件夹放到src/assets文件夹下，然后打开style.css文件把里面的内容全部复制到src/theme下新建的icons.scss文件里，如下图所示：
将字体文件复制到项目
复制sky字体文件的style.css的内容到icons.scss文件中
现在就是对字体文件进行修改了，操作如下图：
修改路径
重命名生成图标
到这里就基本上好了，需要我们做的就是去src/theme/variables.scss文件中加两行代码进行引用就好了，加的代码如下：
@import "./icons";
@import "ionicons";
在variables.scss中引用
好了，现在全部完成了，直接去html中引用去页面看效果
html中引用
效果展示
以上几种方法我在写这篇文章的时候都又操作了一遍，每一步都有详细的截图和说明，可以说ionic2和ionic3的项目中想用自定义图标的，在这篇这篇里应该能找到答案，如果对文中操作有疑问请留言。
文中如果有写错或不对的地方恳请您留言指出批评，如果此文对你有帮助，请加关注收藏点赞。
