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

この章では、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> 元に戻す