재질-알림 아이콘
이 장에서는 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> 태그를 표에 제공된 코드로 대체하여 각 출력을 얻습니다.
| 용법 | 결과 | 
|---|---|
| <i class = "material-icons custom"> adb </ i> | adb | 
| <i class = "material-icons custom"> airline_seat_flat </ i> | airline_seat_flat | 
| <i class = "material-icons custom"> airline_seat_flat_angled </ i> | airline_seat_flat_angled | 
| <i class = "material-icons custom"> airline_seat_individual_suite </ i> | airline_seat_individual_suite | 
| <i class = "material-icons custom"> airline_seat_legroom_reduced </ i> | airline_seat_legroom_reduced | 
| <i class = "material-icons custom"> airline_seat_recline_extra </ i> | airline_seat_recline_extra | 
| <i class = "material-icons custom"> airline_seat_recline_normal </ i> | airline_seat_recline_normal | 
| <i class = "material-icons custom"> bluetooth_audio </ i> | 블루투스 _ 오디오 | 
| <i class = "material-icons custom"> 확인 _ 번호 </ i> | 확인 번호 | 
| <i class = "material-icons custom"> disc_full </ i> | disc_full | 
| <i class = "material-icons custom"> 방해 금지 </ i> | 방해하지 마 | 
| <i class = "material-icons custom"> 방해 _ 금지 _ 금지 _ </ i> | do_not_disturb_alt | 
| <i class = "material-icons custom"> drive_eta </ i> | drive_eta | 
| <i class = "material-icons custom"> event_available </ i> | event_available | 
| <i class = "material-icons custom"> event_busy </ i> | event_busy | 
| <i class = "material-icons custom"> event_note </ i> | event_note | 
| <i class = "material-icons custom"> folder_special </ i> | folder_special | 
| <i class = "material-icons custom"> live_tv </ i> | 생방송 | 
| <i class = "material-icons custom"> mms </ i> | mms | 
| <i class = "material-icons custom"> 더보기 </ i> | 더 | 
| <i class = "material-icons custom"> network_locked </ i> | network_locked | 
| <i class = "material-icons custom"> ondemand_video </ i> | ondemand_video | 
| <i class = "material-icons custom"> personal_video </ i> | personal_video | 
| <i class = "material-icons custom"> phone_bluetooth_speaker </ i> | phone_bluetooth_speaker | 
| <i class = "material-icons custom"> phone_forwarded </ i> | phone_forwarded | 
| <i class = "material-icons custom"> phone_in_talk </ i> | phone_in_talk | 
| <i class = "material-icons custom"> phone_locked </ i> | phone_locked | 
| <i class = "material-icons custom"> phone_missed </ i> | phone_missed | 
| <i class = "material-icons custom"> phone_paused </ i> | phone_paused | 
| <i class = "material-icons custom"> 힘 </ i> | 힘 | 
| <i class = "material-icons custom"> sd_card </ i> | sd_card | 
| <i class = "material-icons custom"> sim_card_alert </ i> | sim_card_alert | 
| <i class = "material-icons custom"> sms </ i> | SMS | 
| <i class = "material-icons custom"> sms_failed </ i> | sms_failed | 
| <i class = "material-icons custom"> 동기화 </ i> | 동조 | 
| <i class = "material-icons custom"> sync_disabled </ i> | sync_disabled | 
| <i class = "material-icons custom"> sync_problem </ i> | sync_problem | 
| <i class = "material-icons custom"> system_update </ i> | 시스템 업데이트 | 
| <i class = "material-icons custom"> tap_and_play </ i> | tap_and_play | 
| <i class = "material-icons custom"> 퇴장 _ 시간 </ i> | 떠나야 할 시간 | 
| <i class = "material-icons custom"> 진동 </ i> | 진동 | 
| <i class = "material-icons custom"> voice_chat </ i> | 음성 채팅 | 
| <i class = "material-icons custom"> vpn_lock </ i> | vpn_lock | 
| <i class = "material-icons custom"> wc </ i> | 화장실 | 
| <i class = "material-icons custom"> wifi </ i> | 와이파이 |