Material - Ícones de imagem

Este capítulo explica o uso dos ícones de imagem (Material) do Google. Assuma issocustom é o nome da classe CSS onde definimos o tamanho e a cor, conforme mostrado no exemplo abaixo.

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

A tabela a seguir contém o uso e os resultados dos ícones de imagem (Material) do Google. Substitua a tag <body> do programa acima com o código fornecido na tabela para obter os respectivos resultados -

Uso	Resultado
<i class = "material-icons custom"> add_to_photos </i>	add_to_photos
<i class = "material-icons custom"> ajuste </i>	ajustar
<i class = "material-icons custom"> assistente </i>	assistente
<i class = "material-icons custom"> assistente </i>	assistente
<i class = "material-icons custom"> audiotrack </i>	faixa de áudio
<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"> brilho_1 </i>	brilho_1
<i class = "material-icons custom"> brilho_2 </i>	brilho_2
<i class = "material-icons custom"> brilho_3 </i>	brilho_3
<i class = "material-icons custom"> brilho_4 </i>	brilho_4
<i class = "material-icons custom"> brilho_5 </i>	brilho_5
<i class = "material-icons custom"> brilho_6 </i>	brilho_6
<i class = "material-icons custom"> brilho_7 </i>	brilho_7
<i class = "material-icons custom"> broken_image </i>	imagem quebrada
<i class = "material-icons custom"> pincel </i>	escova
<i class = "material-icons custom"> câmera </i>	Câmera
<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>	rolo da câmera
<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"> coleções </i>	coleções
<i class = "material-icons custom"> collection_bookmark </i>	collection_bookmark
<i class = "material-icons custom"> color_lens </i>	color_lens
<i class = "material-icons custom"> colorir </i>	colorir
<i class = "material-icons custom"> compare </i>	comparar
<i class = "material-icons custom"> control_point </i>	ponto de controlo
<i class = "material-icons custom"> control_point_duplicate </i>	control_point_duplicate
<i class = "material-icons custom"> cortar </i>	colheita
<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>	colheita_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"> desanuviar </i>	desembaçar
<i class = "material-icons custom"> detalhes </i>	detalhes
<i class = "material-icons custom"> editar </i>	editar
<i class = "material-icons custom"> exposição </i>	exposição
<i class = "material-icons custom"> exposição_neg_1 </i>	exposição_neg_1
<i class = "material-icons custom"> exposição_plus_1 </i>	exposição_plus_1
<i class = "material-icons custom"> exposição_plus_2 </i>	exposição_mais_2
<i class = "material-icons custom"> exposição_zero </i>	exposição_zero
<i class = "material-icons custom"> filtro </i>	filtro
<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"> alargamento </i>	chama
<i class = "material-icons custom"> flash_auto </i>	flash_auto
<i class = "material-icons custom"> flash_off </i>	Flash desligado
<i class = "material-icons custom"> flash_on </i>	flash_on
<i class = "material-icons custom"> flip </i>	giro
<i class = "material-icons custom"> gradiente </i>	gradiente
<i class = "material-icons custom"> grão </i>	grão
<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"> cura </i>	cura
<i class = "material-icons custom"> imagem </i>	imagem
<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"> paisagem </i>	panorama
<i class = "material-icons custom"> vazamento_adicionar </i>	vazar_adicionar
<i class = "material-icons custom"> escape_remove </i>	vazar_ remover
<i class = "material-icons custom"> lente </i>	lente
<i class = "material-icons custom"> aparência </i>	parece
<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"> monochrome_photos </i>	monocromático_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"> natureza </i>	natureza
<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>	navegar_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_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"> foto </i>	foto
<i class = "material-icons custom"> photo_album </i>	álbum de foto
<i class = "material-icons custom"> photo_camera </i>	câmera fotografica
<i class = "material-icons custom"> photo_library </i>	biblioteca de fotos
<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"> 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>	vire à esquerda
<i class = "material-icons custom"> rotate_right </i>	vire à direita
<i class = "material-icons custom"> apresentação de slides </i>	apresentação de slides
<i class = "material-icons custom"> endireitar </i>	endireitar
<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"> lapso de tempo </i>	lapso de tempo
<i class = "material-icons custom"> cronômetro </i>	cronômetro
<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>	temporizador off
<i class = "material-icons custom"> tonalidade </i>	tonalidade
<i class = "material-icons custom"> transformar </i>	transformar
<i class = "material-icons custom"> melodia </i>	afinação
<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"> vinheta </i>	vinheta
<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

↰ Previous page Next page ↱