재질-작업 아이콘

이 장에서는 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"> 3d_rotation </ i>	3d_rotation
<i class = "material-icons custom"> 접근성 </ i>	접근성
<i class = "material-icons custom"> 계정 _ 잔액 </ i>	계정 잔액
<i class = "material-icons custom"> account_balance_wallet </ i>	account_balance_wallet
<i class = "material-icons custom"> account_box </ i>	account_box
<i class = "material-icons custom"> account_circle </ i>	account_circle
<i class = "material-icons custom"> add_shopping_cart </ i>	add_shopping_cart
<i class = "material-icons custom"> 알람 </ i>	경보
<i class = "material-icons custom"> alarm_add </ i>	alarm_add
<i class = "material-icons custom"> alarm_off </ i>	alarm_off
<i class = "material-icons custom"> alarm_on </ i>	alarm_on
<i class = "material-icons custom"> 안드로이드 </ i>	기계적 인조 인간
<i class = "material-icons custom"> 공지 </ i>	발표
<i class = "material-icons custom"> aspect_ratio </ i>	종횡비
<i class = "material-icons custom"> 평가 </ i>	평가
<i class = "material-icons custom"> 할당 </ i>	할당
<i class = "material-icons custom"> assignment_ind </ i>	assignment_ind
<i class = "material-icons custom"> assignment_late </ i>	과제 _ 지연
<i class = "material-icons custom"> 할당 _ 반품 </ i>	할당 _ 반품
<i class = "material-icons custom"> 할당 _ 반환 됨 </ i>	할당 _ 반환
<i class = "material-icons custom"> assignment_turned_in </ 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"> bookmark_border </ i>	bookmark_border
<i class = "material-icons custom"> 버그 _ 보고서 </ i>	버그 신고
<i class = "material-icons custom"> 빌드 </ i>	짓다
<i class = "material-icons custom"> 캐시 됨 </ i>	캐시 됨
<i class = "material-icons custom"> camera_enhance </ i>	camera_enhance
<i class = "material-icons custom"> card_giftcard </ i>	card_giftcard
<i class = "material-icons custom"> card_membership </ i>	card_membership
<i class = "material-icons custom"> 카드 _ 여행 </ i>	card_travel
<i class = "material-icons custom"> 변경 _ 역사 </ i>	change_history
<i class = "material-icons custom"> 체크 _ 서클 </ i>	check_circle
<i class = "material-icons custom"> chrome_reader_mode </ i>	chrome_reader_mode
<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"> dns </ i>	dns
<i class = "material-icons custom"> 완료 </ i>	끝난
<i class = "material-icons custom"> done_all </ i>	done_all
<i class = "material-icons custom"> 꺼내기 </ i>	꺼내다
<i class = "material-icons custom"> 이벤트 </ i>	행사
<i class = "material-icons custom"> event_seat </ i>	이벤트 _ 좌석
<i class = "material-icons custom"> exit_to_app </ i>	exit_to_app
<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"> favorite_border </ i>	favorite_border
<i class = "material-icons custom"> 의견 </ i>	피드백
<i class = "material-icons custom"> find_in_page </ i>	find_in_page
<i class = "material-icons custom"> find_replace </ i>	find_replace
<i class = "material-icons custom"> flight_land </ i>	flight_land
<i class = "material-icons custom"> flight_takeoff </ i>	flight_takeoff
<i class = "material-icons custom"> 뒤집기 _ 뒤로 </ i>	flip_to_back
<i class = "material-icons custom"> 앞으로 뒤집기 </ i>	flip_to_front
<i class = "material-icons custom"> get_app </ i>	get_app
<i class = "material-icons custom"> gif </ i>	gif
<i class = "material-icons custom"> 등급 </ i>	등급
<i class = "material-icons custom"> group_work </ i>	그룹 과제
<i class = "material-icons custom"> 도움말 </ i>	도움
<i class = "material-icons custom"> help_outline </ i>	help_outline
<i class = "material-icons custom"> highlight_off </ i>	highlight_off
<i class = "material-icons custom"> 역사 </ i>	역사
<i class = "material-icons custom"> 홈 </ i>	집
<i class = "material-icons custom"> 모래 시계 _ 빈 </ i>	hourglass_empty
<i class = "material-icons custom"> 모래 시계 전체 </ i>	hourglass_full
<i class = "material-icons custom"> http </ i>	http
<i class = "material-icons custom"> https </ i>	https
<i class = "material-icons custom"> 정보 </ i>	정보
<i class = "material-icons custom"> info_outline </ i>	info_outline
<i class = "material-icons custom"> 입력 </ i>	입력
<i class = "material-icons custom"> invert_colors </ i>	반전 색상
<i class = "material-icons custom"> 라벨 </ i>	상표
<i class = "material-icons custom"> label_outline </ i>	label_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"> lock_open </ i>	lock_open
<i class = "material-icons custom"> lock_outline </ i>	lock_outline
<i class = "material-icons custom"> 충성도 </ i>	충의
<i class = "material-icons custom"> markunread_mailbox </ i>	markunread_mailbox
<i class = "material-icons custom"> note_add </ i>	note_add
<i class = "material-icons custom"> offline_pin </ i>	offline_pin
<i class = "material-icons custom"> 브라우저에서 _ 열기 </ i>	브라우저에서 열려
<i class = "material-icons custom"> open_in_new </ i>	open_in_new
<i class = "material-icons custom"> open_with </ i>	open_with
<i class = "material-icons custom"> 페이지 뷰 </ i>	페이지보기
<i class = "material-icons custom"> 결제 </ i>	지불
<i class = "material-icons custom"> perm_camera_mic </ i>	perm_camera_mic
<i class = "material-icons custom"> perm_contact_cale </ i>	perm_contact_cale
<i class = "material-icons custom"> perm_data_settings </ i>	perm_data_settings
<i class = "material-icons custom"> perm_device_information </ i>	perm_device_information
<i class = "material-icons custom"> perm_identity </ i>	perm_identity
<i class = "material-icons custom"> perm_media </ i>	perm_media
<i class = "material-icons custom"> perm_phone_msg </ i>	perm_phone_msg
<i class = "material-icons custom"> perm_scan_wifi </ i>	perm_scan_wifi
<i class = "material-icons custom"> picture_in_picture </ i>	picture_in_picture
<i class = "material-icons custom"> 업무용 _ 놀이 </ i>	play_for_work
<i class = "material-icons custom"> 폴리머 </ i>	고분자
<i class = "material-icons custom"> power_settings_new </ i>	power_settings_new
<i class = "material-icons custom"> 인쇄 </ i>	인쇄
<i class = "material-icons custom"> query_builder </ i>	query_builder
<i class = "material-icons custom"> question_answer </ 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>	report_problem
<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"> settings_applications </ i>	settings_applications
<i class = "material-icons custom"> settings_bluetooth </ i>	settings_bluetooth
<i class = "material-icons custom"> settings_brightness </ i>	settings_brightness
<i class = "material-icons custom"> settings_cell </ i>	settings_cell
<i class = "material-icons custom"> settings_ethernet </ i>	settings_ethernet
<i class = "material-icons custom"> settings_input_antenna </ i>	settings_input_antenna
<i class = "material-icons custom"> settings_input_component </ i>	settings_input_component
<i class = "material-icons custom"> settings_input_hdmi </ i>	settings_input_hdmi
<i class = "material-icons custom"> settings_input_svideo </ i>	settings_input_svideo
<i class = "material-icons custom"> settings_overscan </ i>	settings_overscan
<i class = "material-icons custom"> settings_phone </ i>	settings_phone
<i class = "material-icons custom"> settings_power </ i>	settings_power
<i class = "material-icons custom"> settings_remote </ i>	settings_remote
<i class = "material-icons custom"> settings_voice </ i>	settings_voice
<i class = "material-icons custom"> 쇼핑 </ i>	가게
<i class = "material-icons custom"> shop_two </ i>	shop_two
<i class = "material-icons custom"> 장바구니 </ i>	쇼핑 바구니
<i class = "material-icons custom"> 쇼핑 카트 </ i>	쇼핑 카트
<i class = "material-icons custom"> speaker_notes </ i>	스피커 _ 노트
<i class = "material-icons custom"> 맞춤법 검사 </ i>	맞춤법 검사
<i class = "material-icons custom"> star_rate </ i>	star_rate
<i class = "material-icons custom"> 별 </ i>	별
<i class = "material-icons custom"> 상점 </ i>	저장
<i class = "material-icons custom"> 제목 </ i>	제목
<i class = "material-icons custom"> 감독자 _ 계정 </ i>	supervisor_account
<i class = "material-icons custom"> swap_horiz </ i>	swap_horiz
<i class = "material-icons custom"> swap_vert </ i>	swap_vert
<i class = "material-icons custom"> swap_vertical_circle </ i>	swap_vertical_circle
<i class = "material-icons custom"> system_update_alt </ i>	system_update_alt
<i class = "material-icons custom"> 탭 </ i>	탭
<i class = "material-icons custom"> tab_unselected </ i>	tab_unselected
<i class = "material-icons custom"> 극장 </ i>	극장
<i class = "material-icons custom"> thumb_down </ i>	thumb_down
<i class = "material-icons custom"> thumb_up </ i>	최고
<i class = "material-icons custom"> thumbs_up_down </ i>	thumb_up_down
<i class = "material-icons custom"> toc </ i>	toc
<i class = "material-icons custom"> 오늘 </ i>	오늘
<i class = "material-icons custom"> 유료 </ i>	통행료
<i class = "material-icons custom"> track_changes </ i>	track_changes
<i class = "material-icons custom"> 번역 </ i>	옮기다
<i class = "material-icons custom"> trending_down </ i>	trending_down
<i class = "material-icons custom"> trending_flat </ i>	trending_flat
<i class = "material-icons custom"> trending_up </ i>	trending_up
<i class = "material-icons custom"> turned_in </ i>	제출하다
<i class = "material-icons custom"> verified_user </ i>	확인 된 사용자
<i class = "material-icons custom"> view_agenda </ i>	view_agenda
<i class = "material-icons custom">보기 _ 배열 </ i>	view_array
<i class = "material-icons custom">보기 _ 캐 러셀 </ i>	view_carousel
<i class = "material-icons custom">보기 _ 열 </ i>	view_column
<i class = "material-icons custom"> view_day </ i>	view_day
<i class = "material-icons custom"> view_headline </ i>	view_headline
<i class = "material-icons custom">보기 _ 목록 </ i>	view_list
<i class = "material-icons custom"> view_module </ i>	view_module
<i class = "material-icons custom"> view_quilt </ i>	view_quilt
<i class = "material-icons custom"> view_stream </ i>	view_stream
<i class = "material-icons custom"> view_week </ i>	view_week
<i class = "material-icons custom"> 가시성 </ i>	시계
<i class = "material-icons custom"> visibility_off </ i>	가시성 _off
<i class = "material-icons custom"> 작업 </ i>	작업
<i class = "material-icons custom"> youtube_searched_for </ i>	youtube_searched_for
<i class = "material-icons custom"> 확대 </ i>	zoom_in
<i class = "material-icons custom"> zoom_out </ i>	축소