재질-편집기 아이콘

이 장에서는 Google의 (Material) Editor 아이콘 사용에 대해 설명합니다. 그것을 가정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의 (Material) Editor 아이콘의 사용법과 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법	결과
<i class = "material-icons custom"> 첨부 파일 </ i>	파일을 첨부
<i class = "material-icons custom"> attach_money </ i>	attach_money
<i class = "material-icons custom"> border_all </ i>	border_all
<i class = "material-icons custom"> border_bottom </ i>	border_bottom
<i class = "material-icons custom"> border_clear </ i>	border_clear
<i class = "material-icons custom"> border_color </ i>	border_color
<i class = "material-icons custom"> border_horizontal </ i>	border_horizontal
<i class = "material-icons custom"> border_inner </ i>	border_inner
<i class = "material-icons custom"> border_left </ i>	border_left
<i class = "material-icons custom"> border_outer </ i>	border_outer
<i class = "material-icons custom"> border_right </ i>	border_right
<i class = "material-icons custom"> 테두리 _ 스타일 </ i>	border_style
<i class = "material-icons custom"> border_top </ i>	border_top
<i class = "material-icons custom"> border_vertical </ i>	border_vertical
<i class = "material-icons custom"> format_align_center </ i>	format_align_center
<i class = "material-icons custom"> format_align_justify </ i>	format_align_justify
<i class = "material-icons custom"> format_align_left </ i>	format_align_left
<i class = "material-icons custom"> format_align_right </ i>	format_align_right
<i class = "material-icons custom"> format_bold </ i>	format_bold
<i class = "material-icons custom"> 형식 _ 지우기 </ i>	format_clear
<i class = "material-icons custom"> format_color_fill </ i>	format_color_fill
<i class = "material-icons custom"> 형식 _ 색상 _ 재설정 </ i>	format_color_reset
<i class = "material-icons custom"> 형식 _ 색상 _ 텍스트 </ i>	format_color_text
<i class = "material-icons custom"> format_indent_decrease </ i>	format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </ i>	format_indent_increase
<i class = "material-icons custom"> format_italic </ i>	format_italic
<i class = "material-icons custom"> 형식 _ 선 _ 간격 </ i>	format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </ i>	format_list_bulleted
<i class = "material-icons custom"> 형식 _ 목록 _ 번호 </ i>	format_list_numbered
<i class = "material-icons custom"> format_paint </ i>	format_paint
<i class = "material-icons custom"> format_quote </ i>	format_quote
<i class = "material-icons custom"> 형식 _ 크기 </ i>	형식 _ 크기
<i class = "material-icons custom"> 형식 _ 취소 선 </ i>	format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </ i>	format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </ i>	format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </ i>	format_underline
<i class = "material-icons custom"> 기능 </ i>	기능
<i class = "material-icons custom"> 삽입 _ 차트 </ i>	insert_chart
<i class = "material-icons custom"> 댓글 삽입 </ i>	코멘트 삽입
<i class = "material-icons custom"> insert_drive_file </ i>	insert_drive_file
<i class = "material-icons custom"> 이모티콘 삽입 </ i>	삽입 _ 이모티콘
<i class = "material-icons custom"> 초대 _ 삽입 </ i>	insert_invitation
<i class = "material-icons custom"> 삽입 _ 링크 </ i>	삽입 _ 링크
<i class = "material-icons custom"> 사진 삽입 </ i>	사진 삽입
<i class = "material-icons custom"> merge_type </ i>	merge_type
<i class = "material-icons custom"> mode_comment </ i>	mode_comment
<i class = "material-icons custom"> mode_edit </ i>	mode_edit
<i class = "material-icons custom"> money_off </ i>	money_off
<i class = "material-icons custom"> 게시 </ i>	출판하다
<i class = "material-icons custom"> 스페이스 바 </ i>	스페이스 바
<i class = "material-icons custom"> 취소 선 </ i>	취소 선 _ 초
<i class = "material-icons custom"> vertical_align_bottom </ i>	vertical_align_bottom
<i class = "material-icons custom"> vertical_align_center </ i>	vertical_align_center
<i class = "material-icons custom"> vertical_align_top </ i>	vertical_align_top
<i class = "material-icons custom"> wrap_text </ i>	wrap_text