素材-画像アイコン

この章では、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">add_to_photos</i>	add_to_photos
<i class="material-icons custom">adjust</i>	adjust
<i class="material-icons custom">assistant</i>	assistant
<i class="material-icons custom">assistant</i>	assistant
<i class="material-icons custom">audiotrack</i>	audiotrack
<i class="material-icons custom">blur_circular</i>	blur_circular
<i class="material-icons custom">blur_linear</i>	blur_linear
<i class="material-icons custom">blur_off</i>	blur_off
<i class="material-icons custom">blur_on</i>	blur_on
<i class="material-icons custom">brightness_1</i>	brightness_1
<i class="material-icons custom">brightness_2</i>	brightness_2
<i class="material-icons custom">brightness_3</i>	brightness_3
<i class="material-icons custom">brightness_4</i>	brightness_4
<i class="material-icons custom">brightness_5</i>	brightness_5
<i class="material-icons custom">brightness_6</i>	brightness_6
<i class="material-icons custom">brightness_7</i>	brightness_7
<i class="material-icons custom">broken_image</i>	broken_image
<i class="material-icons custom">brush</i>	brush
<i class="material-icons custom">camera</i>	camera
<i class="material-icons custom">camera_alt</i>	camera_alt
<i class="material-icons custom">camera_front</i>	camera_front
<i class="material-icons custom">camera_rear</i>	camera_rear
<i class="material-icons custom">camera_roll</i>	camera_roll
<i class="material-icons custom">center_focus_strong</i>	center_focus_strong
<i class="material-icons custom">center_focus_weak</i>	center_focus_weak
<i class="material-icons custom">collections</i>	collections
<i class="material-icons custom">collections_bookmark</i>	collections_bookmark
<i class="material-icons custom">color_lens</i>	color_lens
<i class="material-icons custom">colorize</i>	colorize
<i class="material-icons custom">compare</i>	compare
<i class="material-icons custom">control_point</i>	control_point
<i class="material-icons custom">control_point_duplicate</i>	control_point_duplicate
<i class="material-icons custom">crop</i>	crop
<i class="material-icons custom">crop_16_9</i>	crop_16_9
<i class="material-icons custom">crop_3_2</i>	crop_3_2
<i class="material-icons custom">crop_5_4</i>	crop_5_4
<i class="material-icons custom">crop_7_5</i>	crop_7_5
<i class="material-icons custom">crop_din</i>	crop_din
<i class="material-icons custom">crop_free</i>	crop_free
<i class="material-icons custom">crop_landscape</i>	crop_landscape
<i class="material-icons custom">crop_original</i>	crop_original
<i class="material-icons custom">crop_portrait</i>	crop_portrait
<i class="material-icons custom">crop_square</i>	crop_square
<i class="material-icons custom">dehaze</i>	dehaze
<i class="material-icons custom">details</i>	details
<i class="material-icons custom">edit</i>	edit
<i class="material-icons custom">exposure</i>	exposure
<i class="material-icons custom">exposure_neg_1</i>	exposure_neg_1
<i class="material-icons custom">exposure_plus_1</i>	exposure_plus_1
<i class="material-icons custom">exposure_plus_2</i>	exposure_plus_2
<i class="material-icons custom">exposure_zero</i>	exposure_zero
<i class="material-icons custom">filter</i>	filter
<i class="material-icons custom">filter_1</i>	filter_1
<i class="material-icons custom">filter_2</i>	filter_2
<i class="material-icons custom">filter_3</i>	filter_3
<i class="material-icons custom">filter_4</i>	filter_4
<i class="material-icons custom">filter_5</i>	filter_5
<i class="material-icons custom">filter_6</i>	filter_6
<i class="material-icons custom">filter_7</i>	filter_7
<i class="material-icons custom">filter_8</i>	filter_8
<i class="material-icons custom">filter_9</i>	filter_9
<i class="material-icons custom">filter_9_plus</i>	filter_9_plus
<i class="material-icons custom">filter_b_and_w</i>	filter_b_and_w
<i class="material-icons custom">filter_center_focus</i>	filter_center_focus
<i class="material-icons custom">filter_drama</i>	filter_drama
<i class="material-icons custom">filter_frames</i>	filter_frames
<i class="material-icons custom">filter_hdr</i>	filter_hdr
<i class="material-icons custom">filter_none</i>	filter_none
<i class="material-icons custom">filter_tilt_shift</i>	filter_tilt_shift
<i class="material-icons custom">filter_vintage</i>	filter_vintage
<i class="material-icons custom">flare</i>	flare
<i class="material-icons custom">flash_auto</i>	flash_auto
<i class="material-icons custom">flash_off</i>	flash_off
<i class="material-icons custom">flash_on</i>	flash_on
<i class="material-icons custom">flip</i>	flip
<i class="material-icons custom">gradient</i>	gradient
<i class="material-icons custom">grain</i>	grain
<i class="material-icons custom">grid_off</i>	grid_off
<i class="material-icons custom">grid_on</i>	grid_on
<i class="material-icons custom">hdr_off</i>	hdr_off
<i class="material-icons custom">hdr_on</i>	hdr_on
<i class="material-icons custom">hdr_strong</i>	hdr_strong
<i class="material-icons custom">hdr_weak</i>	hdr_weak
<i class="material-icons custom">healing</i>	healing
<i class="material-icons custom">image</i>	image
<i class="material-icons custom">image_aspect_ratio</i>	image_aspect_ratio
<i class="material-icons custom">iso</i>	iso
<i class="material-icons custom">landscape</i>	landscape
<i class="material-icons custom">leak_add</i>	leak_add
<i class="material-icons custom">leak_remove</i>	leak_remove
<i class="material-icons custom">lens</i>	lens
<i class="material-icons custom">looks</i>	looks
<i class="material-icons custom">looks_3</i>	looks_3
<i class="material-icons custom">looks_4</i>	looks_4
<i class="material-icons custom">looks_5</i>	looks_5
<i class="material-icons custom">looks_6</i>	looks_6
<i class="material-icons custom">looks_one</i>	looks_one
<i class="material-icons custom">looks_two</i>	looks_two
<i class="material-icons custom">loupe</i>	loupe
<i class="material-icons custom">monochrome_photos</i>	monochrome_photos
<i class="material-icons custom">movie_creation</i>	movie_creation
<i class="material-icons custom">music_note</i>	music_note
<i class="material-icons custom">nature</i>	nature
<i class="material-icons custom">nature_people</i>	nature_people
<i class="material-icons custom">wb_sunny</i>	wb_sunny
<i class="material-icons custom">navigate_next</i>	navigate_next
<i class="material-icons custom">navigate_before</i>	navigate_before
<i class="material-icons custom">palette</i>	palette
<i class="material-icons custom">panorama</i>	panorama
<i class="material-icons custom">panorama_fish_eye</i>	panorama_fish_eye
<i class="material-icons custom">panorama_horizontal</i>	panorama_horizontal
<i class="material-icons custom">panorama_vertical</i>	panorama_vertical
<i class="material-icons custom">panorama_wide_angle</i>	panorama_wide_angle
<i class="material-icons custom">photo</i>	photo
<i class="material-icons custom">photo_album</i>	photo_album
<i class="material-icons custom">photo_camera</i>	photo_camera
<i class="material-icons custom">photo_library</i>	photo_library
<i class="material-icons custom">photo_size_select_actual</i>	photo_size_select_actual
<i class="material-icons custom">photo_size_select_large</i>	photo_size_select_large
<i class="material-icons custom">photo_size_select_small</i>	photo_size_select_small
<i class="material-icons custom">picture_as_pdf</i>	picture_as_pdf
<i class="material-icons custom">portrait</i>	portrait
<i class="material-icons custom">remove_red_eye</i>	remove_red_eye
<i class="material-icons custom">rotate_90_degrees_ccw</i>	rotate_90_degrees_ccw
<i class="material-icons custom">rotate_left</i>	rotate_left
<i class="material-icons custom">rotate_right</i>	rotate_right
<i class="material-icons custom">slideshow</i>	slideshow
<i class="material-icons custom">straighten</i>	straighten
<i class="material-icons custom">style</i>	style
<i class="material-icons custom">switch_camera</i>	switch_camera
<i class="material-icons custom">switch_video</i>	switch_video
<i class="material-icons custom">tag_faces</i>	tag_faces
<i class="material-icons custom">texture</i>	texture
<i class="material-icons custom">timelapse</i>	timelapse
<i class="material-icons custom">timer</i>	timer
<i class="material-icons custom">timer_10</i>	timer_10
<i class="material-icons custom">timer_3</i>	timer_3
<i class="material-icons custom">timer_off</i>	timer_off
<i class="material-icons custom">tonality</i>	tonality
<i class="material-icons custom">transform</i>	transform
<i class="material-icons custom">tune</i>	tune
<i class="material-icons custom">view_comfy</i>	view_comfy
<i class="material-icons custom">view_compact</i>	view_compact
<i class="material-icons custom">vignette</i>	vignette
<i class="material-icons custom">wb_auto</i>	wb_auto
<i class="material-icons custom">wb_cloudy</i>	wb_cloudy
<i class="material-icons custom">wb_incandescent</i>	wb_incandescent
<i class="material-icons custom">wb_iridescent</i>	wb_iridescent

Web-icons-material-image-icons

素材-画像アイコン