素材-アクションアイコン

この章では、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>タグを表に記載されているコードに置き換えて、それぞれの出力を取得します-

Usage	Result
<i class="material-icons custom">3d_rotation</i>	3d_rotation
<i class="material-icons custom">accessibility</i>	accessibility
<i class="material-icons custom">account_balance</i>	account_balance
<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">alarm</i>	alarm
<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">android</i>	android
<i class="material-icons custom">announcement</i>	announcement
<i class="material-icons custom">aspect_ratio</i>	aspect_ratio
<i class="material-icons custom">assessment</i>	assessment
<i class="material-icons custom">assignment</i>	assignment
<i class="material-icons custom">assignment_ind</i>	assignment_ind
<i class="material-icons custom">assignment_late</i>	assignment_late
<i class="material-icons custom">assignment_return</i>	assignment_return
<i class="material-icons custom">assignment_returned</i>	assignment_returned
<i class="material-icons custom">assignment_turned_in</i>	assignment_turned_in
<i class="material-icons custom">autorenew</i>	autorenew
<i class="material-icons custom">backup</i>	backup
<i class="material-icons custom">book</i>	book
<i class="material-icons custom">bookmark</i>	bookmark
<i class="material-icons custom">bookmark_border</i>	bookmark_border
<i class="material-icons custom">bug_report</i>	bug_report
<i class="material-icons custom">build</i>	build
<i class="material-icons custom">cached</i>	cached
<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">card_travel</i>	card_travel
<i class="material-icons custom">change_history</i>	change_history
<i class="material-icons custom">check_circle</i>	check_circle
<i class="material-icons custom">chrome_reader_mode</i>	chrome_reader_mode
<i class="material-icons custom">class</i>	class
<i class="material-icons custom">code</i>	code
<i class="material-icons custom">credit_card</i>	credit_card
<i class="material-icons custom">dashboard</i>	dashboard
<i class="material-icons custom">delete</i>	delete
<i class="material-icons custom">description</i>	description
<i class="material-icons custom">dns</i>	dns
<i class="material-icons custom">done</i>	done
<i class="material-icons custom">done_all</i>	done_all
<i class="material-icons custom">eject</i>	eject
<i class="material-icons custom">event</i>	event
<i class="material-icons custom">event_seat</i>	event_seat
<i class="material-icons custom">exit_to_app</i>	exit_to_app
<i class="material-icons custom">explore</i>	explore
<i class="material-icons custom">extension</i>	extension
<i class="material-icons custom">face</i>	face
<i class="material-icons custom">favorite</i>	favorite
<i class="material-icons custom">favorite_border</i>	favorite_border
<i class="material-icons custom">feedback</i>	feedback
<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">flip_to_back</i>	flip_to_back
<i class="material-icons custom">flip_to_front</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">grade</i>	grade
<i class="material-icons custom">group_work</i>	group_work
<i class="material-icons custom">help</i>	help
<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">history</i>	history
<i class="material-icons custom">home</i>	home
<i class="material-icons custom">hourglass_empty</i>	hourglass_empty
<i class="material-icons custom">hourglass_full</i>	hourglass_full
<i class="material-icons custom">http</i>	http
<i class="material-icons custom">https</i>	https
<i class="material-icons custom">info</i>	info
<i class="material-icons custom">info_outline</i>	info_outline
<i class="material-icons custom">input</i>	input
<i class="material-icons custom">invert_colors</i>	invert_colors
<i class="material-icons custom">label</i>	label
<i class="material-icons custom">label_outline</i>	label_outline
<i class="material-icons custom">language</i>	language
<i class="material-icons custom">launch</i>	launch
<i class="material-icons custom">list</i>	list
<i class="material-icons custom">lock</i>	lock
<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">loyalty</i>	loyalty
<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">open_in_browser</i>	open_in_browser
<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">pageview</i>	pageview
<i class="material-icons custom">payment</i>	payment
<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">play_for_work</i>	play_for_work
<i class="material-icons custom">polymer</i>	polymer
<i class="material-icons custom">power_settings_new</i>	power_settings_new
<i class="material-icons custom">print</i>	print
<i class="material-icons custom">query_builder</i>	query_builder
<i class="material-icons custom">question_answer</i>	question_answer
<i class="material-icons custom">receipt</i>	receipt
<i class="material-icons custom">redeem</i>	redeem
<i class="material-icons custom">reorder</i>	reorder
<i class="material-icons custom">report_problem</i>	report_problem
<i class="material-icons custom">restore</i>	restore
<i class="material-icons custom">room</i>	room
<i class="material-icons custom">schedule</i>	schedule
<i class="material-icons custom">search</i>	search
<i class="material-icons custom">settings</i>	settings
<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">shop</i>	shop
<i class="material-icons custom">shop_two</i>	shop_two
<i class="material-icons custom">shopping_basket</i>	shopping_basket
<i class="material-icons custom">shopping_cart</i>	shopping_cart
<i class="material-icons custom">speaker_notes</i>	speaker_notes
<i class="material-icons custom">spellcheck</i>	spellcheck
<i class="material-icons custom">star_rate</i>	star_rate
<i class="material-icons custom">stars</i>	stars
<i class="material-icons custom">store</i>	store
<i class="material-icons custom">subject</i>	subject
<i class="material-icons custom">supervisor_account</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">tab</i>	tab
<i class="material-icons custom">tab_unselected</i>	tab_unselected
<i class="material-icons custom">theaters</i>	theaters
<i class="material-icons custom">thumb_down</i>	thumb_down
<i class="material-icons custom">thumb_up</i>	thumb_up
<i class="material-icons custom">thumbs_up_down</i>	thumbs_up_down
<i class="material-icons custom">toc</i>	toc
<i class="material-icons custom">today</i>	today
<i class="material-icons custom">toll</i>	toll
<i class="material-icons custom">track_changes</i>	track_changes
<i class="material-icons custom">translate</i>	translate
<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>	turned_in
<i class="material-icons custom">verified_user</i>	verified_user
<i class="material-icons custom">view_agenda</i>	view_agenda
<i class="material-icons custom">view_array</i>	view_array
<i class="material-icons custom">view_carousel</i>	view_carousel
<i class="material-icons custom">view_column</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">view_list</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">visibility</i>	visibility
<i class="material-icons custom">visibility_off</i>	visibility_off
<i class="material-icons custom">work</i>	work
<i class="material-icons custom">youtube_searched_for</i>	youtube_searched_for
<i class="material-icons custom">zoom_in</i>	zoom_in
<i class="material-icons custom">zoom_out</i>	zoom_out

Web-icons-material-action-icons

素材-アクションアイコン