재질-콘텐츠 아이콘

이 장에서는 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"> 추가 </ i>	더하다
<i class = "material-icons custom"> add_box </ i>	add_box
<i class = "material-icons custom"> 원 추가 </ i>	add_circle
<i class = "material-icons custom"> add_circle_outline </ i>	add_circle_outline
<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"> content_copy </ i>	content_copy
<i class = "material-icons custom"> content_cut </ i>	content_cut
<i class = "material-icons custom"> content_paste </ i>	content_paste
<i class = "material-icons custom"> 만들기 </ i>	창조하다
<i class = "material-icons custom"> 초안 </ i>	체커
<i class = "material-icons custom"> 필터 _ 목록 </ i>	filter_list
<i class = "material-icons custom"> 플래그 </ i>	깃발
<i class = "material-icons custom"> font_download </ i>	font_download
<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"> 메일 </ i>	우편
<i class = "material-icons custom"> 읽지 않은 표시 </ i>	읽지 않은
<i class = "material-icons custom"> 다시 실행 </ i>	다시 하다
<i class = "material-icons custom"> 제거 </ i>	없애다
<i class = "material-icons custom"> remove_circle </ i>	remove_circle
<i class = "material-icons custom"> remove_circle_outline </ i>	remove_circle_outline
<i class = "material-icons custom"> 답장 </ i>	댓글
<i class = "material-icons custom"> reply_all </ i>	모든 응답
<i class = "material-icons custom"> 보고서 </ i>	보고서
<i class = "material-icons custom"> 저장 </ i>	저장
<i class = "material-icons custom"> select_all </ i>	select_all
<i class = "material-icons custom"> 보내기 </ i>	보내다
<i class = "material-icons custom"> 정렬 </ i>	종류
<i class = "material-icons custom"> text_format </ i>	text_format
<i class = "material-icons custom"> stay_current_portrait </ i>	stay_current_portrait
<i class = "material-icons custom"> 실행 취소 </ i>	실행 취소