재질-작업 아이콘

이 장에서는 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> 축소