Materiał - ikony obrazu

W tym rozdziale wyjaśniono użycie ikon Google (Material) Image. Zakładać, żecustom to nazwa klasy CSS, w której zdefiniowaliśmy rozmiar i kolor, jak pokazano w przykładzie podanym poniżej.

<!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>

Poniższa tabela zawiera wykorzystanie i wyniki ikon Google (Material) Image. Zastąp tag <body> powyższego programu kodem podanym w tabeli, aby uzyskać odpowiednie wyniki -

Stosowanie	Wynik
<i class = "material-icons custom"> add_to_photos </i>	add_to_photos
<i class = "material-icons custom"> dostosuj </i>	dostosować
<i class = "material-icons custom"> asystent </i>	asystent
<i class = "material-icons custom"> asystent </i>	asystent
<i class = "material-icons custom"> audiotrack </i>	ścieżka dźwiękowa
<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"> jasność_1 </i>	jasność_1
<i class = "material-icons custom"> jasność_2 </i>	jasność_2
<i class = "material-icons custom"> jasność_3 </i>	jasność_3
<i class = "material-icons custom"> jasność_4 </i>	jasność_4
<i class = "material-icons custom"> jasność_5 </i>	jasność_5
<i class = "material-icons custom"> jasność_6 </i>	jasność_6
<i class = "material-icons custom"> jasność_7 </i>	jasność_7
<i class = "material-icons custom"> broken_image </i>	broken_image
<i class = "material-icons custom"> pędzel </i>	szczotka
<i class = "material-icons custom"> aparat </i>	aparat fotograficzny
<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"> kolekcje </i>	kolekcje
<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"> pokoloruj </i>	pokolorować
<i class = "material-icons custom"> porównaj </i>	porównać
<i class = "material-icons custom"> punkt_kontrolny </i>	punkt kontrolny
<i class = "material-icons custom"> control_point_duplicate </i>	control_point_duplicate
<i class = "material-icons custom"> przycinanie </i>	przyciąć
<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"> szczegóły </i>	Detale
<i class = "material-icons custom"> edytuj </i>	edytować
<i class = "material-icons custom"> ekspozycja </i>	narażenie
<i class = "material-icons custom"> ekspozycja_neg_1 </i>	ekspozycja_neg_1
<i class = "material-icons custom"> ekspozycja_plus_1 </i>	ekspozycja_plus_1
<i class = "material-icons custom"> ekspozycja_plus_2 </i>	ekspozycja_plus_2
<i class = "material-icons custom"> ekspozycja_zero </i>	ekspozycja_zero
<i class = "material-icons custom"> filtr </i>	filtr
<i class = "material-icons custom"> filter_1 </i>	filtr_1
<i class = "material-icons custom"> filter_2 </i>	filter_2
<i class = "material-icons custom"> filter_3 </i>	filtr_3
<i class = "material-icons custom"> filter_4 </i>	filtr_4
<i class = "material-icons custom"> filter_5 </i>	filtr_5
<i class = "material-icons custom"> filter_6 </i>	filtr_6
<i class = "material-icons custom"> filter_7 </i>	filtr_7
<i class = "material-icons custom"> filter_8 </i>	filtr_8
<i class = "material-icons custom"> filter_9 </i>	filtr_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"> flara </i>	migotać
<i class = "material-icons custom"> flash_auto </i>	flash_auto
<i class = "material-icons custom"> flash_off </i>	lampa zgaszona
<i class = "material-icons custom"> flash_on </i>	flash_on
<i class = "material-icons custom"> odwróć </i>	trzepnięcie
<i class = "material-icons custom"> gradient </i>	gradient
<i class = "material-icons custom"> ziarno </i>	ziarno
<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"> uzdrowienie </i>	gojenie: zdrowienie
<i class = "material-icons custom"> obraz </i>	wizerunek
<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"> pozioma </i>	krajobraz
<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"> soczewka </i>	obiektyw
<i class = "material-icons custom"> wygląda </i>	wygląda
<i class = "material-icons custom"> look_3 </i>	wygląda_3
<i class = "material-icons custom"> look_4 </i>	wygląda_4
<i class = "material-icons custom"> look_5 </i>	wygląda_5
<i class = "material-icons custom"> look_6 </i>	wygląda_6
<i class = "material-icons custom"> looks_one </i>	look_one
<i class = "material-icons custom"> looks_two </i>	look_two
<i class = "material-icons custom"> lupa </i>	lupa
<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>	nuta
<i class = "material-icons custom"> natura </i>	Natura
<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"> paleta </i>	paleta
<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"> zdjęcie </i>	zdjęcie
<i class = "material-icons custom"> album_zdjecia </i>	album zdjęć
<i class = "material-icons custom"> photo_camera </i>	aparat fotograficzny
<i class = "material-icons custom"> photo_library </i>	Album zdjęć
<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"> portret </i>	portret
<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>	obrót w lewo
<i class = "material-icons custom"> rotate_right </i>	Obróć w prawo
<i class = "material-icons custom"> pokaz slajdów </i>	pokaz slajdów
<i class = "material-icons custom"> wyprostuj </i>	wyprostować
<i class = "material-icons custom"> styl </i>	styl
<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"> tekstura </i>	tekstura
<i class = "material-icons custom"> timelapse </i>	timelapse
<i class = "material-icons custom"> licznik czasu </i>	regulator czasowy
<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>	Programator wyłączony
<i class = "material-icons custom"> tonacja </i>	tonalność
<i class = "material-icons custom"> transformacja </i>	przekształcać
<i class = "material-icons custom"> dostroić </i>	melodia
<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"> winieta </i>	winieta
<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