Google アイコンを使用するには、HTMLページの <head> セクション内に以下の行を追加します：
<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
Try It Yourself »
Google アイコンは、インライン要素で使用するように設計されています。
<i> と <span> 要素は広くアイコンに使用されています。
注: 素材（Material）アイコンは、デフォルトでは 24px です。
また、アイコンのコンテナの色を変更する場合は、アイコンの色も変ることに注意してください。 同じことは、シャドウ、および CSS を使用して継承されるあらゆるものに該当します。 例外は、CSS font-size property何か他のものが指定されていない限り、常には24pxであるCSSのfont-sizeプロパティ、です。 The exception is the CSS font-size プロパティで、何か他のものが指定されていない限り、常には 24px です。
material アイコンは、任意のサイズにスケーリングすることができますが、 推奨されるフォントサイズは 18、24、36 または 48px の何れかです：
次のコード：
<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
Try It Yourself »