재질-콘텐츠 아이콘

이 장에서는 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> 실행 취소