재질-하드웨어 아이콘

이 장에서는 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> 손목 시계