素材 - 通知圖示

本章解釋 Google (Material) 通知圖示的用法。假設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 (Material) 通知圖示的用法和結果。將上面程式的<body>標籤替換成表中給出的程式碼，即可得到相應的結果：

用法	結果
<i class="material-icons custom">adb</i>
<i class="material-icons custom">airline_seat_flat</i>
<i class="material-icons custom">airline_seat_flat_angled</i>
<i class="material-icons custom">airline_seat_individual_suite</i>
<i class="material-icons custom">airline_seat_legroom_reduced</i>
<i class="material-icons custom">airline_seat_recline_extra</i>
<i class="material-icons custom">airline_seat_recline_normal</i>
<i class="material-icons custom">bluetooth_audio</i>
<i class="material-icons custom">confirmation_number</i>
<i class="material-icons custom">disc_full</i>
<i class="material-icons custom">do_not_disturb</i>
<i class="material-icons custom">do_not_disturb_alt</i>
<i class="material-icons custom">drive_eta</i>
<i class="material-icons custom">event_available</i>
<i class="material-icons custom">event_busy</i>
<i class="material-icons custom">event_note</i>
<i class="material-icons custom">folder_special</i>
<i class="material-icons custom">live_tv</i>
<i class="material-icons custom">mms</i>
<i class="material-icons custom">more</i>
<i class="material-icons custom">network_locked</i>
<i class="material-icons custom">ondemand_video</i>
<i class="material-icons custom">personal_video</i>
<i class="material-icons custom">phone_bluetooth_speaker</i>
<i class="material-icons custom">phone_forwarded</i>
<i class="material-icons custom">phone_in_talk</i>
<i class="material-icons custom">phone_locked</i>
<i class="material-icons custom">phone_missed</i>
<i class="material-icons custom">phone_paused</i>
<i class="material-icons custom">power</i>
<i class="material-icons custom">sd_card</i>
<i class="material-icons custom">sim_card_alert</i>
<i class="material-icons custom">sms</i>
<i class="material-icons custom">sms_failed</i>
<i class="material-icons custom">sync</i>
<i class="material-icons custom">sync_disabled</i>
<i class="material-icons custom">sync_problem</i>
<i class="material-icons custom">system_update</i>
<i class="material-icons custom">tap_and_play</i>
<i class="material-icons custom">time_to_leave</i>
<i class="material-icons custom">vibration</i>
<i class="material-icons custom">voice_chat</i>
<i class="material-icons custom">vpn_lock</i>
<i class="material-icons custom">wc</i>
<i class="material-icons custom">wifi</i>

列印頁面