マテリアルアイコン

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でアイコンのサイズを定義し、クラス名と一緒に使用することで、アイコンのサイズを拡大または縮小できます。次の例では、サイズを6emと宣言しています。

<!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のMaterialIconsフォントは、次のカテゴリの519個のアイコンを提供します-

アクションアイコン
アラートアイコン
AVアイコン
コミュニケーションアイコン
コンテンツアイコン
デバイスアイコン
エディタアイコン
ファイルアイコン
ハードウェアアイコン
画像アイコン
マップアイコン
ナビゲーションアイコン
通知アイコン
ソーシャルアイコン
アイコンの切り替え

これらのアイコンのいずれかを使用するには、この章に記載されているプログラムのクラス名を目的のアイコンのクラス名に置き換える必要があります。このユニット（マテリアルアイコン）の次の章では、さまざまなマテリアルアイコンの使用法とそれぞれの出力についてカテゴリ別に説明しました。