素材-コミュニケーションアイコン

この章では、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>	ビジネス
<iclass = "material-iconscustom">電話</ i>	コール
<i class = "material-icons custom"> call_made </ i>	call_made
<i class = "material-icons custom"> call_merge </ i>	call_merge
<i class = "material-icons custom"> call_missed </ i>	call_missed
<i class = "material-icons custom"> call_received </ i>	call_received
<i class = "material-icons custom"> call_split </ i>	call_split
<iclass = "material-iconscustom">チャット</ i>	チャット
<i class = "material-icons custom"> chat_bubble </ i>	chat_bubble
<i class = "material-icons custom"> chat_bubble_outline </ i>	chat_bubble_outline
<i class = "material-icons custom"> clear_all </ i>	すべてクリア
<iclass = "material-iconscustom">コメント</ i>	コメント
<i class = "material-icons custom"> contact_phone </ i>	contact_phone
<iclass = "material-iconscustom">連絡先</ i>	連絡先
<i class = "material-icons custom"> dialer_sip </ i>	dialer_sip
<iclass = "material-iconscustom">ダイヤルパッド</ i>	ダイヤルパッド
<iclass = "material-iconscustom">フォーラム</ i>	フォーラム
<i class = "material-icons custom"> import_export </ i>	インポート・エクスポート
<i class = "material-icons custom"> invert_colors_off </ i>	invert_colors_off
<i class = "material-icons custom"> live_help </ i>	live_help
<i class = "material-icons custom"> location_off </ i>	location_off
<i class = "material-icons custom"> location_on </ i>	location_on
<iclass = "material-iconscustom">メッセージ</ i>	メッセージ
<i class = "material-icons custom"> no_sim </ i>	no_sim
<iclass = "material-iconscustom">電話</ i>	電話
<i class = "material-icons custom"> phonelink_erase </ i>	phonelink_erase
<i class = "material-icons custom"> phonelink_lock </ i>	phonelink_lock
<i class = "material-icons custom"> phonelink_ring </ i>	phonelink_ring
<i class = "material-icons custom"> phonelink_setup </ i>	phonelink_setup
<i class = "material-icons custom"> portal_wifi_off </ i>	Portable_wifi_off
<i class = "material-icons custom"> present_to_all </ i>	present_to_all
<i class = "material-icons custom"> ring_volume </ i>	ring_volume
<i class = "material-icons custom"> Speaker_phone </ i>	Speaker_phone
<i class = "material-icons custom"> stay_current_landscape </ i>	stay_current_landscape
<i class = "material-icons custom"> stay_current_portrait </ i>	stay_current_portrait
<i class = "material-icons custom"> stay_primary_landscape </ i>	stay_primary_landscape
<i class = "material-icons custom"> stay_primary_portrait </ i>	stay_primary_portrait
<i class = "material-icons custom"> swap_calls </ i>	swap_calls
<iclass = "material-iconscustom">テキスト</ i>	textsms
<iclass = "material-iconscustom">ボイスメール</ i>	ボイスメール
<i class = "material-icons custom"> vpn_key </ i>	vpn_key
<iclass = "material-iconscustom">メール</ i>	Eメール
<i class = "material-icons custom"> call_end </ i>	call_end