素材-コンテンツアイコン

この章では、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>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">add</i>	add
<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
<i class="material-icons custom">archive</i>	archive
<i class="material-icons custom">backspace</i>	backspace
<i class="material-icons custom">block</i>	block
<i class="material-icons custom">clear</i>	clear
<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
<i class="material-icons custom">create</i>	create
<i class="material-icons custom">drafts</i>	drafts
<i class="material-icons custom">filter_list</i>	filter_list
<i class="material-icons custom">flag</i>	flag
<i class="material-icons custom">font_download</i>	font_download
<i class="material-icons custom">forward</i>	forward
<i class="material-icons custom">gesture</i>	gesture
<i class="material-icons custom">inbox</i>	inbox
<i class="material-icons custom">link</i>	link
<i class="material-icons custom">mail</i>	mail
<i class="material-icons custom">markunread</i>	markunread
<i class="material-icons custom">redo</i>	redo
<i class="material-icons custom">remove</i>	remove
<i class="material-icons custom">remove_circle</i>	remove_circle
<i class="material-icons custom">remove_circle_outline</i>	remove_circle_outline
<i class="material-icons custom">reply</i>	reply
<i class="material-icons custom">reply_all</i>	reply_all
<i class="material-icons custom">report</i>	report
<i class="material-icons custom">save</i>	save
<i class="material-icons custom">select_all</i>	select_all
<i class="material-icons custom">send</i>	send
<i class="material-icons custom">sort</i>	sort
<i class="material-icons custom">text_format</i>	text_format
<i class="material-icons custom">stay_current_portrait</i>	stay_current_portrait
<i class="material-icons custom">undo</i>	undo

Web-icons-material-content-icons

素材-コンテンツアイコン