材料-通信アイコン

この章では、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">business</i>	business
<i class="material-icons custom">call</i>	call
<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
<i class="material-icons custom">chat</i>	chat
<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>	clear_all
<i class="material-icons custom">comment</i>	comment
<i class="material-icons custom">contact_phone</i>	contact_phone
<i class="material-icons custom">contacts</i>	contacts
<i class="material-icons custom">dialer_sip</i>	dialer_sip
<i class="material-icons custom">dialpad</i>	dialpad
<i class="material-icons custom">forum</i>	forum
<i class="material-icons custom">import_export</i>	import_export
<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
<i class="material-icons custom">message</i>	message
<i class="material-icons custom">no_sim</i>	no_sim
<i class="material-icons custom">phone</i>	phone
<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">portable_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
<i class="material-icons custom">textsms</i>	textsms
<i class="material-icons custom">voicemail</i>	voicemail
<i class="material-icons custom">vpn_key</i>	vpn_key
<i class="material-icons custom">email</i>	email
<i class="material-icons custom">call_end</i>	call_end

Web-icons-material-communication-icons

材料-通信アイコン