재질-하드웨어 아이콘

이 장에서는 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의 (자료) 하드웨어 아이콘의 사용 및 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 캐스트 </ i>	캐스트
<i class = "material-icons custom"> cast_connected </ i>	cast_connected
<i class = "material-icons custom"> 컴퓨터 </ i>	컴퓨터
<i class = "material-icons custom"> desktop_mac </ i>	desktop_mac
<i class = "material-icons custom"> desktop_windows </ i>	desktop_windows
<i class = "material-icons custom"> 개발자 _ 보드 </ i>	개발자 _ 보드
<i class = "material-icons custom"> device_hub </ i>	device_hub
<i class = "material-icons custom"> 도킹 </ i>	독
<i class = "material-icons custom"> 게임 패드 </ i>	게임 패드
<i class = "material-icons custom"> 헤드셋 </ i>	헤드폰
<i class = "material-icons custom"> headset_mic </ i>	headset_mic
<i class = "material-icons custom"> 키보드 </ i>	건반
<i class = "material-icons custom"> keyboard_arrow_down </ i>	keyboard_arrow_down
<i class = "material-icons custom"> keyboard_arrow_left </ i>	keyboard_arrow_left
<i class = "material-icons custom"> keyboard_arrow_right </ i>	keyboard_arrow_right
<i class = "material-icons custom"> keyboard_arrow_up </ i>	keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </ i>	keyboard_backspace
<i class = "material-icons custom"> keyboard_capslock </ i>	keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </ i>	keyboard_hide
<i class = "material-icons custom"> keyboard_return </ i>	keyboard_return
<i class = "material-icons custom"> keyboard_tab </ i>	keyboard_tab
<i class = "material-icons custom"> keyboard_voice </ i>	keyboard_voice
<i class = "material-icons custom"> 노트북 </ i>	노트북
<i class = "material-icons custom"> laptop_chromebook </ i>	laptop_chromebook
<i class = "material-icons custom"> laptop_mac </ i>	laptop_mac
<i class = "material-icons custom"> laptop_windows </ i>	노트북 _ 창
<i class = "material-icons custom"> 메모리 </ i>	기억
<i class = "material-icons custom"> 마우스 </ i>	쥐
<i class = "material-icons custom"> phone_android </ i>	phone_android
<i class = "material-icons custom"> phone_iphone </ i>	phone_iphone
<i class = "material-icons custom"> 전화 링크 </ i>	phonelink
<i class = "material-icons custom"> phonelink_off </ i>	phonelink_off
<i class = "material-icons custom"> 전원 _ 입력 </ i>	전원 입력
<i class = "material-icons custom"> 라우터 </ i>	라우터
<i class = "material-icons custom"> 스캐너 </ i>	스캐너
<i class = "material-icons custom"> 보안 </ i>	보안
<i class = "material-icons custom"> sim_card </ i>	SIM 카드
<i class = "material-icons custom"> 스마트 폰 </ i>	스마트 폰
<i class = "material-icons custom"> 스피커 </ i>	스피커
<i class = "material-icons custom"> 스피커 _ 그룹 </ i>	스피커 _ 그룹
<i class = "material-icons custom"> 태블릿 </ i>	태블릿
<i class = "material-icons custom"> tablet_android </ i>	tablet_android
<i class = "material-icons custom"> tablet_mac </ i>	tablet_mac
<i class = "material-icons custom"> 장난감 </ i>	장난감
<i class = "material-icons custom"> TV </ i>	TV
<i class = "material-icons custom">보기 </ i>	손목 시계