マテリアル-コンテンツアイコン

この章では、Googleの（マテリアル）コンテンツアイコンの使用法について説明します。と仮定するcustom 以下の例に示すように、サイズと色を定義したCSSクラス名です。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

次の表には、Googleの（マテリアル）コンテンツアイコンの使用法と結果が含まれています。上記のプログラムの<body>タグを表に示されているコードに置き換えて、それぞれの出力を取得します-

使用法	結果
<iclass = "material-iconscustom">追加</ i>	追加
<i class = "material-icons custom"> add_box </ i>	add_box
<i class = "material-icons custom"> add_circle </ i>	add_circle
<i class = "material-icons custom"> add_circle_outline </ i>	add_circle_outline
<iclass = "material-iconscustom">アーカイブ</ i>	アーカイブ
<iclass = "material-iconscustom">バックスペース</ i>	バックスペース
<iclass = "material-iconscustom">ブロック</ i>	ブロック
<i class = "material-iconscustom">クリア</ i>	晴れ
<i class = "material-icons custom"> content_copy </ i>	content_copy
<i class = "material-icons custom"> content_cut </ i>	content_cut
<i class = "material-icons custom"> content_paste </ i>	content_paste
<iclass = "material-iconscustom">作成</ i>	作成する
<iclass = "material-iconscustom">ドラフト</ i>	ドラフト
<i class = "material-icons custom"> filter_list </ i>	filter_list
<iclass = "material-iconscustom">フラグ</ i>	国旗
<i class = "material-icons custom"> font_download </ i>	font_download
<iclass = "material-iconscustom">転送</ i>	フォワード
<iclass = "material-iconscustom">ジェスチャー</ i>	ジェスチャー
<iclass = "material-iconscustom">受信トレイ</ i>	受信トレイ
<iclass = "material-iconscustom">リンク</ i>	リンク
<iclass = "material-iconscustom">メール</ i>	郵便物
<i class = "material-icons custom"> markunread </ i>	markunread
<iclass = "material-iconscustom">やり直し</ i>	やり直し
<iclass = "material-iconscustom">削除</ i>	削除する
<i class = "material-icons custom"> remove_circle </ i>	remove_circle
<i class = "material-icons custom"> remove_circle_outline </ i>	remove_circle_outline
<iclass = "material-iconscustom">返信</ i>	応答
<i class = "material-icons custom"> reply_all </ i>	全員に返信
<iclass = "material-iconscustom">レポート</ i>	報告する
<iclass = "material-iconscustom">保存</ i>	保存する
<i class = "material-icons custom"> select_all </ i>	すべて選択
<iclass = "material-iconscustom">送信</ i>	送信
<iclass = "material-iconscustom">並べ替え</ i>	ソート
<i class = "material-icons custom"> text_format </ i>	text_format
<i class = "material-icons custom"> stay_current_portrait </ i>	stay_current_portrait
<iclass = "material-iconscustom">元に戻す</ i>	元に戻す