第一步，我們可以去阿里圖標網(wǎng)找我們要的圖標：
http://www.iconfont.cn/
這里寫圖片描述
然后點擊最右上角的購物車，選擇svg圖可以選擇自己想要的顏色。點擊：下載素材，選擇svg，注意不要選png。png圖在瀏覽器上顯示正常，放到手機上就會失真的。把svg圖片下載下來。
第二步：在assets文件夾下創(chuàng)建一個fonts文件夾，然后把svg圖放到里面。
在theme文件夾中，創(chuàng)建文件icons.scss，便于管理
寫入樣式（注意圖片的路徑不要錯）：
.ion-md-myIcon:before {
content: url("../assets/fonts/people-fill.svg");
}
.ion-md-myIcon-outline:before {
content: url("../assets/fonts/people.svg");
}
注意：myIcon是自己起的圖標名稱，前面的不要改。
第三步：
導入到variables.scss中！必須滴。
@import "./icons";
直接在模板中使用！簡單吧
<ion-icon name="myIcon"></ion-icon>
<ion-icon name="myIcon-outline"></ion-icon>
效果圖：
這里寫圖片描述
Tab圖標的使用：
tab圖標，其實就是兩個圖標，一個填充的和一個outline的。通過樣式來切換。
在下載的時候，我們找兩個對應(yīng)的就行了，如上面的人頭圖標，兩個都下載下來。
1.加入樣式：
.tab-button[aria-selected=false] .ion-md-myIcon-outline:before {
content: url("../assets/fonts/people.svg");
}
.tab-button[aria-selected=true] .ion-md-myIcon-outline:before {
content: url("../assets/fonts/people-fill.svg");
}
上面的樣式有點復雜，錯了就顯示不出了，有小伙伴沒顯示可能就是這里，我把自己的理解寫寫。首先是屬性選擇器：[aria-selected=true]，表示tab被選中。子選擇器：一個空格接著后面的樣式，最后是偽類。
然后我們可以打開控制臺，選中一個tab看看：
image.png
由最簡單的原生元素封裝而來，這就一個tab的全部。我們可以看到樣式：ion-md-myIcon-outline，它的由來就是：ion-+ 平臺 + -tabIcon的值組成的，如果你改變tabIcon的值：
image.png
那么可以看到樣式名也跟著改變：
image.png
把兩邊的樣式對應(yīng)起來我們就可以知道，這似乎就像我們最開始寫的簡單的css那樣：在css文件中寫css，在元素中綁定。不是嗎？
另外，你想單個使用時，前面第二步中的那些樣式同樣是不可以少的。
2.同樣在模板中直接用
<ion-tab [root]="tab2Root" tabTitle="Img" tabIcon="myIcon-outline"></ion-tab>
效果圖：
未選中時：
這里寫圖片描述
選中時：
這里寫圖片描述
