方式一：原生圖標
小程序里原生圖標是通過icon標簽來引入的：
<icon type="success" size="24" color="green" />
但是原生圖標只有這么幾個，面對前端妖嬈繁雜的需求是捉襟見肘，遠遠不夠用啊！
方式二：WeUI圖標組件
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，基於小程序自定義組件構建。
由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。
要使用WeUI組件，我們需要到組件下載頁面去下載icon組件：developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
下載完成后我們會得到一個icon文件夾。
里面有四個文件：icon.js, icon.json, icon.wxml,icon.wxss
我們在項目根目錄下創建一個components文件夾，再將icon文件夾拷貝進去，然后在app.json中增加以下配置：
"usingComponents": {
"mp-icon": "components/icon/icon"},
在測試頁面增加一段代碼：
<button type="primary" style="width:100%;">
<mp-icon icon="add" color="white" size="{{25}}"></mp-icon></button>
組件庫里icon圖標列表請參考這個鏈接：developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html。
目前一共有81個，這些圖標對本人來說已經夠用了。
但是對於很多特定行業比如旅游，外賣APP來說，圖標定制化程度可能更高。
那么我們也需要讓小程序有這樣引入外部資源的能力。
方式三：iconfont圖標
真不是說，阿里的這個圖標庫(www.iconfont.cn)真是給眾多不會搞設計的程序員帶來了莫大的福祉（馬雲：這詞是我發明的）。
上面的圖標種類繁多，你想要的都有，更多的還是你想不到的。
你需要做的就是把喜歡的圖標加入購物車，然后分類作為一個項目下載下來：
解壓下載下來的download.zip文件，將其中的iconfont.css文件拷貝到小程序utils目錄下，重命名為iconfont.wxss，打開iconfont.wxss，將@font-face部分的一些url引用(紅色框選部分)刪除掉(看不清楚點擊圖片看大圖哦)：
打開app.wxss,在首行引入iconfont.wxss：
/**app.wxss**/@import './utils/iconfont.wxss';
在視圖文件中，我們通過以下方式顯示圖標：
<icon class="iconfont icon-youxiang"></icon>
效果圖：
參考：https://baijiahao.baidu.com/s?id=1651775595545295274&wfr=spider&for=pc