Material - Iconos de imagen

Este capítulo explica el uso de los íconos de imágenes (de materiales) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

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

La siguiente tabla contiene el uso y los resultados de los íconos de imágenes (de materiales) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso Resultado
<i class = "material-icons personalizado"> add_to_photos </i> add_to_photos
<i class = "material-icons custom"> ajustar </i> ajustar
<i class = "material-icons custom"> asistente </i> asistente
<i class = "material-icons custom"> asistente </i> asistente
<i class = "material-icons custom"> pista de audio </i> pista de audio
<i class = "material-icons custom"> blur_circular </i> difuminar_circular
<i class = "material-icons custom"> blur_linear </i> blur_linear
<i class = "material-icons personalizado"> blur_off </i> blur_off
<i class = "material-icons custom"> difuminar_en </i> desenfoque
<i class = "material-icons personalizado"> brillo_1 </i> brillo_1
<i class = "material-icons personalizado"> brillo_2 </i> brillo_2
<i class = "material-icons personalizado"> brillo_3 </i> brillo_3
<i class = "material-icons personalizado"> brillo_4 </i> brillo_4
<i class = "material-icons personalizado"> brillo_5 </i> brillo_5
<i class = "material-icons personalizado"> brillo_6 </i> brillo_6
<i class = "material-icons personalizado"> brillo_7 </i> brillo_7
<i class = "material-icons custom"> imagen_ rota </i> imagen_ rota
<i class = "material-icons custom"> pincel </i> cepillo
<i class = "material-icons custom"> cámara </i> cámara
<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> rollo de la cámara
<i class = "material-icons custom"> center_focus_strong </i> center_focus_trong
<i class = "material-icons custom"> center_focus_weak </i> center_focus_weak
<i class = "material-icons custom"> colecciones </i> colecciones
<i class = "material-icons custom"> collections_bookmark </i> collection_bookmark
<i class = "material-icons custom"> lentes de color </i> color_lens
<i class = "material-icons custom"> colorear </i> colorear
<i class = "material-icons custom"> comparar </i> comparar
<i class = "material-icons custom"> punto_control </i> punto de control
<i class = "material-icons custom"> control_point_duplicate </i> control_point_duplicate
<i class = "material-icons custom"> recortar </i> cosecha
<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"> eliminar la neblina </i> despojar
<i class = "material-icons custom"> detalles </i> detalles
<i class = "material-icons custom"> editar </i> editar
<i class = "material-icons custom"> exposición </i> exposición
<i class = "material-icons custom"> exposición_neg_1 </i> exposición_neg_1
<i class = "material-icons custom"> exposición_plus_1 </i> exposición_plus_1
<i class = "material-icons custom"> exposición_plus_2 </i> exposición_plus_2
<i class = "material-icons custom"> exposición_zero </i> exposición_ cero
<i class = "material-icons personalizado"> filtro </i> filtrar
<i class = "material-icons personalizado"> filter_1 </i> filter_1
<i class = "material-icons personalizado"> filter_2 </i> filter_2
<i class = "material-icons personalizado"> filter_3 </i> filter_3
<i class = "material-icons personalizado"> filter_4 </i> filter_4
<i class = "material-icons personalizado"> filter_5 </i> filter_5
<i class = "material-icons personalizado"> filter_6 </i> filter_6
<i class = "material-icons personalizado"> filter_7 </i> filter_7
<i class = "material-icons personalizado"> filter_8 </i> filter_8
<i class = "material-icons personalizado"> filter_9 </i> filter_9
<i class = "material-icons personalizado"> filter_9_plus </i> filter_9_plus
<i class = "material-icons personalizado"> filter_b_and_w </i> filter_b_and_w
<i class = "material-icons personalizado"> filter_center_focus </i> filter_center_focus
<i class = "material-icons personalizado"> filter_drama </i> filter_drama
<i class = "material-icons personalizado"> 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 personalizado"> filter_vintage </i> filter_vintage
<i class = "material-icons custom"> destello </i> llamarada
<i class = "material-icons personalizado"> flash_auto </i> flash_auto
<i class = "material-icons custom"> flash_off </i> flash_off
<i class = "material-icons custom"> flash_on </i> parpadeará en
<i class = "material-icons custom"> voltear </i> dar la vuelta
<i class = "material-icons custom"> degradado </i> degradado
<i class = "material-icons custom"> grano </i> grano
<i class = "material-icons custom"> grid_off </i> grid_off
<i class = "material-icons custom"> grid_on </i> cuadrícula activa
<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_trong
<i class = "material-icons custom"> hdr_weak </i> hdr_weak
<i class = "material-icons custom"> curación </i> curación
<i class = "material-icons custom"> imagen </i> imagen
<i class = "material-icons custom"> image_aspect_ratio </i> image_aspect_ratio
<i class = "material-icons custom"> iso </i> Yo asi
<i class = "material-icons custom"> paisaje </i> paisaje
<i class = "material-icons custom"> fuga_add </i> fuga_add
<i class = "material-icons custom"> fuga_remove </i> escape_remove
<i class = "material-icons custom"> lente </i> lente
<i class = "material-icons custom"> looks </i> mira
<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"> lupa </i> lupa
<i class = "material-icons custom"> monocromas_fotos </i> monocromáticas_fotos
<i class = "material-icons custom"> movie_creation </i> movie_creation
<i class = "material-icons custom"> music_note </i> nota musical
<i class = "material-icons custom"> naturaleza </i> naturaleza
<i class = "material-icons custom"> personas_naturaleza </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> navegar_antes
<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_ojo
<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"> foto </i> foto
<i class = "material-icons custom"> álbum_foto </i> album de fotos
<i class = "material-icons custom"> photo_camera </i> Cámara fotográfica
<i class = "material-icons custom"> biblioteca_foto </i> librería fotográfica
<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> imagen_como_pdf
<i class = "material-icons custom"> retrato </i> retrato
<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> girar a la izquierda
<i class = "material-icons custom"> rotate_right </i> Gira a la derecha
<i class = "material-icons custom"> presentación de diapositivas </i> diapositivas
<i class = "material-icons custom"> enderezar </i> enderezar
<i class = "material-icons custom"> estilo </i> estilo
<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"> textura </i> textura
<i class = "material-icons custom"> timelapse </i> timelapse
<i class = "material-icons custom"> temporizador </i> Temporizador
<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"> tonalidad </i> tonalidad
<i class = "material-icons custom"> transformar </i> transformar
<i class = "material-icons custom"> sintonizar </i> melodía
<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"> viñeta </i> viñeta
<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_incandescente
<i class = "material-icons custom"> wb_iridescent </i> wb_iridescent