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