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 |