ionic3自定义icon图标（简单版！！）

转载自：http://blog.csdn.net/qq993284758/article/details/78107412

第一步，我们可以去阿里图标网找我们要的图标： 
http://www.iconfont.cn/ 

然后点击最右上角的购物车，选择svg图可以选择自己想要的颜色。点击：下载素材，选择svg，注意不要选png。png图在手机上会失真的。把svg图片下载下来。

第二步：在assets文件夹下创建一个fonts文件夹，然后把svg图放到里面。

在theme文件夹中，创建文件icons.scss，便于管理 
写入样式（注意图片的路径不要错）：

.ion-ios-myIcon:before { content: url("../assets/fonts/people-fill.svg");}
.ion-ios-myIcon-outline:before { content: url("../assets/fonts/people.svg"); }
 
 
1
2

注意：ios-myIcon是自己起的图标名称，不知为何前面要加ios或者md平台，否则不显示，加就加吧。

第三步： 
导入到variables.scss中！必须滴。

@import "./icons";
 
 
1

直接在模板中使用！简单吧

<ion-icon name="ios-myIcon"></ion-icon>
<ion-icon name="ios-myIcon-outline"></ion-icon>
 
 
1
2
3

效果图： 

Tab图标的使用：

tab图标，说白了就是两个图标，一个填充的和一个outline的。通过样式来切换。 
在下载的时候，我们找两个对应的就行了，如上面的人头图标，两个都下载下来。

1.加入样式：

.tab-button[aria-selected=false] .ion-ios-myIcon-outline:before { content: url("../assets/fonts/people.svg"); }
.tab-button[aria-selected=true] .ion-ios-myIcon-outline:before { content: url("../assets/fonts/people-fill.svg");}
 
 
1
2

注意：图标名称都是ios-myIcon-outline，当aria-selected=false时，显示outline的图标， 
为true（被选中）时显示fill/填充的图标。注意，你想单个使用时，前面第二步中的那些样式同样是不可以少的。

2.同样在模板中直接用

<ion-tab [root]="tab2Root" tabTitle="Img" tabIcon="ios-myIcon-outline"></ion-tab>