基本的なアイコン
Googleのアイコンを使用するには、内部に以下の行を追加します。 <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 »それを自分で試してみてください Googleのアイコンは、インライン要素で使用するように設計されています。 <i>と<span>要素は広くアイコンで使用されています。
注：材料のアイコンは、デフォルトでは24pxされています。
また、アイコンのコンテナの色を変更する場合は、アイコンの色があまりにも変化することに注意してください。 同じことは、シャドウ、およびCSSを使用して継承されます何か他のもののために行きます。 例外は、何か他のものが指定されていない限り、常には24pxであるCSSのfont-sizeプロパティ、です。
かなりのアイコン
材料アイコンは任意のサイズにスケーリングすることができますが、推奨フォントサイズは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
»それを自分で試してみてください