基本圖標
要使用谷歌的圖標，添加內以下行<head> HTML頁面的部分：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
注：無需下載或安裝！
添加material-icons類內嵌元素，並插入圖標的名稱：
例
下面的代碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons"
style="font-size:48px;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:red;">cloud</i>
</body>
</html>
結果是：
cloud
cloud
cloud 試一試» 谷歌圖標被設計成與內聯元素被使用。 在<i>和<span>元素被廣泛用於圖標。
注：材料的圖標默認情況下，24px的。
還要注意的是，如果你改變圖標的容器的顏色，圖標的顏色也會發生變化。 同樣的事情也適用於陰影，和其他任何被使用CSS繼承。 唯一的例外是CSS font-size屬性，這始終是24px的，除非指定別的東西。
相當大的圖標
雖然該材料的圖標可以縮放到任何尺寸，建議的字體大小可以是18，24，36或48像素的：
例
下面的代碼：
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size:
18px; }
.material-icons.md-24 { font-size:
24px; } /* Default */
.material-icons.md-36 { font-size:
36px; }
.material-icons.md-48 { font-size:
48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons
md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons
md-48">cloud</i>結果是：
cloud
cloud
cloud
cloud
試一試»