Материал - значки изображений

В этой главе объясняется использование значков 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"> add_to_photos </i> add_to_photos
<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"> 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"> яркость_1 </i> яркость_1
<i class = "material-icons custom"> яркость_2 </i> яркость_2
<i class = "material-icons custom"> яркость_3 </i> яркость_3
<i class = "material-icons custom"> яркость_4 </i> яркость_4
<i class = "material-icons custom"> яркость_5 </i> яркость_5
<i class = "material-icons custom"> яркость_6 </i> яркость_6
<i class = "material-icons custom"> яркость_7 </i> яркость_7
<i class = "material-icons custom"> broken_image </i> broken_image
<i class = "material-icons custom"> кисть </i> щетка
<i class = "material-icons custom"> камера </i> камера
<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> Фотопленка
<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"> коллекции </i> коллекции
<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"> раскрашивать </i> раскрашивать
<i class = "material-icons custom"> сравнить </i> сравнить
<i class = "material-icons custom"> контрольная_точка </i> контрольная точка
<i class = "material-icons custom"> control_point_duplicate </i> control_point_duplicate
<i class = "material-icons custom"> обрезка </i> урожай
<i class = "material-icons custom"> crop_16_9 </i> урожай_16_9
<i class = "material-icons custom"> crop_3_2 </i> урожай_3_2
<i class = "material-icons custom"> crop_5_4 </i> урожай_5_4
<i class = "material-icons custom"> crop_7_5 </i> урожай_7_5
<i class = "material-icons custom"> crop_din </i> урожай_дин
<i class = "material-icons custom"> crop_free </i> Crop_free
<i class = "material-icons custom"> crop_landscape </i> урожай_пейзаж
<i class = "material-icons custom"> crop_original </i> урожай_оригинал
<i class = "material-icons custom"> crop_portrait </i> crop_portrait
<i class = "material-icons custom"> crop_square </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"> exc_neg_1 </i> экспозиция_neg_1
<i class = "material-icons custom"> exc_plus_1 </i> экспозиция_plus_1
<i class = "material-icons custom"> extension_plus_2 </i> экспозиция_plus_2
<i class = "material-icons custom"> Exposition_zero </i> выдержка_zero
<i class = "material-icons custom"> фильтр </i> фильтр
<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"> вспышка </i> вспышка
<i class = "material-icons custom"> flash_auto </i> flash_auto
<i class = "material-icons custom"> flash_off </i> вспышка выключена
<i class = "material-icons custom"> flash_on </i> flash_on
<i class = "material-icons custom"> перевернуть </i> кувырок
<i class = "material-icons custom"> градиент </i> градиент
<i class = "material-icons custom"> зернистость </i> зерно
<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"> исцеление </i> выздоровление
<i class = "material-icons custom"> изображение </i> образ
<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"> пейзаж </i> пейзаж
<i class = "material-icons custom"> leak_add </i> утечка_адд
<i class = "material-icons custom"> leak_remove </i> утечка_remove
<i class = "material-icons custom"> линза </i> линза
<i class = "material-icons custom"> выглядит </i> выглядит
<i class = "material-icons custom"> look_3 </i> выглядит_3
<i class = "material-icons custom"> look_4 </i> выглядит_4
<i class = "material-icons custom"> look_5 </i> look_5
<i class = "material-icons custom"> look_6 </i> выглядит_6
<i class = "material-icons custom"> look_one </i> look_one
<i class = "material-icons custom"> look_two </i> look_two
<i class = "material-icons custom"> лупа </i> лупа
<i class = "material-icons custom"> монохромные_фотографии </i> монохромные_фотографии
<i class = "material-icons custom"> movie_creation </i> movie_creation
<i class = "material-icons custom"> music_note </i> нота
<i class = "material-icons custom"> природа </i> природа
<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"> палитра </i> палитра
<i class = "material-icons custom"> панорама </i> панорама
<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"> фото </i> Фото
<i class = "material-icons custom"> фото_альбом </i> Фотоальбом
<i class = "material-icons custom"> фото_камера </i> фото камера
<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"> портрет </i> портрет
<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> поверните влево
<i class = "material-icons custom"> rotate_right </i> rotate_right
<i class = "material-icons custom"> слайд-шоу </i> слайдшоу
<i class = "material-icons custom"> выпрямить </i> выпрямить
<i class = "material-icons custom"> стиль </i> стиль
<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"> текстура </i> текстура
<i class = "material-icons custom"> интервальная съемка </i> промежуток времени
<i class = "material-icons custom"> таймер </i> таймер
<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> Таймер выключения
<i class = "material-icons custom"> тональность </i> тональность
<i class = "material-icons custom"> преобразовать </i> преобразовать
<i class = "material-icons custom"> настроить </i> настраивать
<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"> виньетка </i> виньетка
<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