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

この章では、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