Web-icons-material-icons
素材アイコン
Googleは、「材料設計ガイドライン」に基づいて設計された750個のアイコンセットを提供します。これらは Material Design アイコンとして知られています。 これらのアイコンはシンプルで、最新のすべてのWebブラウザーをサポートしています。 これらのアイコンはベクターベースであるため、同様にスケーラブルです。 これらのアイコンを使用するには、フォント（ライブラリ） material-icons をロードする必要があります。
フォント（ライブラリ）の読み込み
マテリアルアイコンライブラリを読み込むには、Webページの<head>セクションに次の行をコピーして貼り付けます。
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>アイコンを使用する
Googleのマテリアルアイコンは、アイコンの長いリストを提供します。 それらのいずれかを選択し、アイコンクラスの名前を<body>タグ内のHTML要素に追加します。 次の例では、アクションカテゴリに属する accessibility *という名前のアイコンを使用しています。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>
<body>
<i class = "material-icons">accessibility</i>
</body>
</html>それは次の出力を生成します-
サイズの定義
以下に示すように、CSSでサイズを定義し、クラス名とともに使用することにより、アイコンのサイズを拡大または縮小できます。 次の例では、サイズを6 emとして宣言しています。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class = "material-icons mysize">accessibility</i>
</body>
</html>それは次の出力を生成します-
色の定義
CSSを使用して、アイコンの色を定義できます。 次の例は、 accessibility というアイコンの色を変更する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 6em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>それは次の出力を生成します-
カテゴリー一覧
GoogleのMaterial Iconsフォントは、次のカテゴリで519個のアイコンを提供します-
- アクションアイコン
- 警告アイコン
- AVアイコン
- 通信アイコン
- コンテンツアイコン
- デバイスアイコン
- エディターアイコン
- ファイルアイコン
- ハードウェアアイコン
- 画像アイコン
- 地図アイコン
- ナビゲーションアイコン
- 通知アイコン
- 社会的なアイコン
- アイコンの切り替え
これらのアイコンを使用するには、この章で説明するプログラムのクラス名を目的のアイコンのクラス名に置き換える必要があります。 この単元の次の章（マテリアルアイコン）で、さまざまなマテリアルアイコンの使用方法とそれぞれの出力をカテゴリごとに説明しました。
