Material design至發佈以來，已然形成了其鮮明的設計風格，並漸漸成為統一 Android Mobile、Android Tablet、Desktop Chrome 等全平臺設計語言規範。基於這樣的趨勢，設計師們對 Material Design 的青睞程度以及運用熟練度也越來越明顯了。
Material design能給用戶帶來最貼近真實場景的使用體驗，實現簡潔直觀的效果，這一切都和設計師對界面的把控和信息層次的掌握息息相關。而圖標正是material界面設計一個必不可少的元素，對於設計師而言，豐富的圖標資源意味著更快捷的設計和更多樣的選擇，所以本文中，我將和大家分享10個優秀的material design 圖標資源，希望對您的設計有所幫助。
1. Google Material Deisgn Icons
格式：PNG, SVG
價格：免費
使用場景：Web, Android, and iOS項目
特點：900多個多種類型的圖標，可供單個下載
全瀏覽器支持
矢量圖標，適應所有屏幕和項目
支持色彩，位置，大小自定義操作
Google Material Design UI風格
該資源包含900多個material design設計系統所用的全部圖標，多種尺寸選擇，還包含可實際運用的網頁字體。全部圖標資源製作精美，完全可以在網頁、Android和iOS項目中使用。 該圖標資源完全免費，允許再設計並分享，提供者拒絕他人進項售賣。
點擊下載：https://material.io/icons/
2. Material Icons form Icons8
格式：PNG, SVG
價格：免費
使用場景：Mac和Windows的所有項目
特點：支持打包下載
提供色彩選擇器，可自定義多種色彩
矢量圖標，適應所有屏幕項目
提供material圖標風格解析，與其他風格進行對比分析
該圖標資源包含Facebook，Twitter，Youtube等各種社交媒體所用圖標和各種箭頭。也包括各種設計項目中所用的圖標，包括設置圖標，手機電話，首頁圖標等等。最大的特點是，該圖標資源在傳統的material design圖標風格上加以改進，具有幾分“非正統”的氣息。
點擊下載：http://icons8.com/material-icons/
3. Material Design Icons
格式：PNGs, SVG, XAML
價格：免費
使用場景：全平臺和全系統
特點：支持單個下載，且可自定義下載格式和下載尺寸
可作網頁字體
矢量圖標，適應所有屏幕項目
免費更新
該圖標資源庫非常豐富，種類多樣，包含近4000個免費圖標資源。這個巨大的免費資源平臺是無數的設計師分享自己的設計成果匯聚而成的，你可以在鼠標懸停的時候看到該圖標的名稱和其設計師。
點擊下載：https://materialdesignicons.com
4. Materialpalette
格式：PNG, SVG
價格：免費
使用場景：iOS和Android
特點：16個圖標種類
支持壓縮包下載
矢量圖標，適應所有屏幕項目
該圖標資源庫是典型的material design設計風格，頁面提供搜索框可快速搜索你想要的圖標，方便查找。該網站還提供調色板和色彩選擇器。
點擊下載：https://www.materialpalette.com/icons
5. Materializecss
格式：PNG, SVG
價格：免費
使用場景：全系統
特點：使用場景規則解析
圖標資源大小設定講解
該網站提供了Google的932個Material Design圖標，提供免費下載。可用於設計師原型，也可直接用於開發人員開發APP。
點擊下載：http://materializecss.com/icons.html
6. Material Icons Design from Flaticon
格式：Vector icon (SVG & EPS), PNG, PSD and Iconfont
價格：免費
使用場景：全系統
特點：提供直接使用圖標設計模板
支持免費分享
支持批量下載
點擊下載：https://www.flaticon.com/packs/material-design
7. Webalys
格式：.Sketch, .AI, .SVG, .PDF, .EPS, .Iconjar files.
價格：免費 - 350個圖標下載
$87 - 1650個圖標下載
$127 - 4000個圖標下載
使用場景：全系統
特點：提供免費和收費兩種類型的下載
Google material design設計規範
面性和線性風格
該網站是我見過的最為齊全的Material Design圖標。其自身也號稱是世界最大material design圖標包。每個圖標都可選擇面性和線性風格，可用於應用程序和網站設計。
點擊下載：http://www.webalys.com/nova/
8. Material UI
格式：SVGs, PNG
價格：免費
使用場景：全系統
特點：搜索框快速搜索
面性風格和線性風格具有
該圖標資源庫支持單個圖標下載，並且每個圖標有四種模式可選：Black, grey, white, SVG，且可選擇多種尺寸。預覽圖標時可以詳細查看圖標信息，並且可以複製SVG代碼。
點擊下載：https://www.materialui.co/icons
9. Material Design Icon Template PSD
格式：PSD
價格：免費
使用場景：全系統
特點：適合設計師個人設計使用
提供配套的UI工具包
該圖標資源庫是設計師Anton Kosolapov上傳至設計網站Uplabs進行分享的。該圖標資源是一個以Material風格設計為導向的全面的圖標模板。它包括指南網格，material設計形式，Android屏幕等。
點擊下載：https://www.uplabs.com/posts/material-design-icon-template-psd
10. Material Design Icons By Brad Williams
格式：SVGs, PNG
價格：免費
使用場景：wordpress頁面
特點：支持wordpress頁面和其博客頁面使用
可用於短代碼
該圖標是設計師Brad Williams提供，包含1000多個可以在WordPress頁面和博客中使用的Material Design圖標，此外， 可以使用簡碼或HTML標記插入圖標。該圖標資源可以3種不同的方式使用：簡碼，HTML和TinyMCE。
點擊下載：https://cn.wordpress.org/plugins/material-design-icons/
以上就是本文整理出的10個material design圖標資源，絕大部分是免費提供，希望您能下載使用。但擁有優秀的圖標資源並不意味著完成了優秀的設計，如何對這些圖標資源進行有效運用呢？如何保證圖標設計和APP的整體Material Design界面風格無縫融合呢？
最有效的方法就是實踐設計，只有不斷的實踐，才能一步一步錘鍊設計技能。快速運用圖標資源進行設計，你需要一款高效簡潔的原型工具。您可以使用國內最好的原型設計工具Mockplus進行設計。
Mockplus自身帶有300多個組件，還包含2000多個矢量圖標，只需簡單拖拽進行界面設計。在其屬性面板上，你可以對圖標進行可見性、色彩、透明度等設置，還可一鍵將其轉化為圖片進行更多操作。
此外，你還可以將以上所有的圖標資源導入Mockplus組件庫加以利用。導入組件庫後，你還可以共享給你的團隊成員，提高組件複用性，來規範項目、減少工作量。
那麼，如何在Mockplus中利用以上圖標資源呢？我們一步一步來。
步驟一：打開Mockplus，新建一個項目。在左側面板選中組件庫圖標，點擊“+”新建一個組件庫，並命名為material design icons，你還可以添加描述，或者更換縮略圖。
步驟二： 選中新建組件庫“material design icons”，點擊“+”在下拉框中點擊導入圖片，或者右鍵新建組件庫也可以找到導入圖片選項。找到下載的material design圖標資源，選中想要導入的圖標資源，即可導入圖標至該組件庫。Mockplus目前支持PNG和JPE格式的圖標資源，你可以批量選中，一次性導入100個圖標資源。
使用Mockplus，進行更快更簡單的設計。Mockplus中有更多優秀的組件和設計可以讓您快速進項原型設計，只需簡單拖拽，快速呈現界面設計。此外，交互設計也只需拖拽鼠標即可完成，你可以快速完成動態原型。
更多免費material design 圖標資源：
1. https://github.com/Templarian/MaterialDesign
2. https://dribbble.com/shots/1938275-Icons-Free-PSD
3. http://materialdesignblog.com/free-master-set-of-material-design-icons/
4. https://dribbble.com/shots/1932096-Material-Design-Powerpoint-Keynote-icons
5. https://www.producthunt.com/posts/material-design-icons
6. https://cdnjs.com/libraries/material-design-icons
7. https://www.iconfinder.com/iconsets/google-material-design-icons
8. dribbble.com/shots/19320…
以上資源由Mockplus團隊整理，瞭解和獲得更多優質設計資源，訪問Mockplus官網
鏈接：https://juejin.im/post/5b06357c518825388d1925a0
閱讀更多 前端圈 的文章
