Material - Ícones de ação

Este capítulo explica o uso dos ícones de ação (materiais) 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 ação (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"> 3d_rotation </i> 3d_rotation
<i class = "material-icons custom"> acessibilidade </i> acessibilidade
<i class = "material-icons custom"> account_balance </i> saldo da conta
<i class = "material-icons custom"> account_balance_wallet </i> account_balance_wallet
<i class = "material-icons custom"> account_box </i> account_box
<i class = "material-icons custom"> account_circle </i> account_circle
<i class = "material-icons custom"> add_shopping_cart </i> add_shopping_cart
<i class = "material-icons custom"> alarme </i> alarme
<i class = "material-icons custom"> alarm_add </i> alarm_add
<i class = "material-icons custom"> alarm_off </i> alarm_off
<i class = "material-icons custom"> alarm_on </i> alarm_on
<i class = "material-icons custom"> android </i> andróide
<i class = "material-icons custom"> anúncio </i> anúncio
<i class = "material-icons custom"> aspect_ratio </i> proporção da tela
<i class = "material-icons custom"> avaliação </i> avaliação
<i class = "material-icons custom"> atribuição </i> tarefa
<i class = "material-icons custom"> atribuição_ind </i> atribuição_ind
<i class = "material-icons custom"> atribuição_late </i> atribuição_late
<i class = "material-icons custom"> assign_return </i> atribuição_retorno
<i class = "material-icons custom"> atribuição_retornada </i> atribuição_retornada
<i class = "material-icons custom"> atribuição_turned_in </i> atribuição_turned_in
<i class = "material-icons custom"> autorenew </i> Auto-renovação
<i class = "material-icons custom"> backup </i> cópia de segurança
<i class = "material-icons custom"> livro </i> livro
<i class = "material-icons custom"> favorito </i> marca páginas
<i class = "material-icons custom"> bookmark_border </i> bookmark_border
<i class = "material-icons custom"> relatório de bug </i> relatório de erro
<i class = "material-icons custom"> construir </i> Construir
<i class = "material-icons custom"> em cache </i> em cache
<i class = "material-icons custom"> camera_enhance </i> camera_enhance
<i class = "material-icons custom"> card_giftcard </i> card_giftcard
<i class = "material-icons custom"> card_membership </i> card_membership
<i class = "material-icons custom"> card_travel </i> card_travel
<i class = "material-icons custom"> change_history </i> change_history
<i class = "material-icons custom"> check_circle </i> check_circle
<i class = "material-icons custom"> chrome_reader_mode </i> chrome_reader_mode
<i class = "material-icons custom"> aula </i> classe
<i class = "material-icons custom"> código </i> código
<i class = "material-icons custom"> cartão de crédito </i> cartão de crédito
<i class = "material-icons custom"> painel </i> painel de controle
<i class = "material-icons custom"> excluir </i> excluir
<i class = "material-icons custom"> descrição </i> descrição
<i class = "material-icons custom"> dns </i> dns
<i class = "material-icons custom"> concluído </i> feito
<i class = "material-icons custom"> done_all </i> done_all
<i class = "material-icons custom"> ejetar </i> ejetar
<i class = "material-icons custom"> evento </i> evento
<i class = "material-icons custom"> event_seat </i> event_seat
<i class = "material-icons custom"> exit_to_app </i> exit_to_app
<i class = "material-icons custom"> explorar </i> explorar
<i class = "material-icons custom"> extensão </i> extensão
<i class = "material-icons custom"> rosto </i> rosto
<i class = "material-icons custom"> favorito </i> favorito
<i class = "material-icons custom"> favorite_border </i> favorite_border
<i class = "material-icons custom"> feedback </i> comentários
<i class = "material-icons custom"> find_in_page </i> find_in_page
<i class = "material-icons custom"> find_replace </i> find_replace
<i class = "material-icons custom"> flight_land </i> flight_land
<i class = "material-icons custom"> flight_takeoff </i> flight_takeoff
<i class = "material-icons custom"> flip_to_back </i> flip_to_back
<i class = "material-icons custom"> flip_to_front </i> flip_to_front
<i class = "material-icons custom"> get_app </i> obter App
<i class = "material-icons custom"> gif </i> gif
<i class = "material-icons custom"> nota </i> grau
<i class = "material-icons custom"> trabalho em grupo </i> trabalho em equipe
<i class = "material-icons custom"> ajuda </i> Socorro
<i class = "material-icons custom"> help_outline </i> help_outline
<i class = "material-icons custom"> destaque </i> destaque_off
<i class = "material-icons custom"> história </i> história
<i class = "material-icons custom"> página inicial </i> casa
<i class = "material-icons custom"> ampulheta_empty </i> ampulheta_empty
<i class = "material-icons custom"> ampulheta_full </i> ampulheta_full
<i class = "material-icons custom"> http </i> http
<i class = "material-icons custom"> https </i> https
<i class = "material-icons custom"> informações </i> informação
<i class = "material-icons custom"> info_outline </i> info_outline
<i class = "material-icons custom"> entrada </i> entrada
<i class = "material-icons custom"> invert_colors </i> Cores invertidas
<i class = "material-icons custom"> etiqueta </i> rótulo
<i class = "material-icons custom"> label_outline </i> label_outline
<i class = "material-icons custom"> idioma </i> língua
<i class = "material-icons custom"> lançamento </i> lançamento
<i class = "material-icons custom"> lista </i> Lista
<i class = "material-icons custom"> bloqueio </i> fechadura
<i class = "material-icons custom"> lock_open </i> lock_open
<i class = "material-icons custom"> lock_outline </i> lock_outline
<i class = "material-icons custom"> lealdade </i> fidelidade
<i class = "material-icons custom"> markunread_mailbox </i> markunread_mailbox
<i class = "material-icons custom"> note_add </i> note_add
<i class = "material-icons custom"> offline_pin </i> offline_pin
<i class = "material-icons custom"> open_in_browser </i> abra no navegador
<i class = "material-icons custom"> open_in_new </i> open_in_new
<i class = "material-icons custom"> open_with </i> Abrir com
<i class = "material-icons custom"> visualização de página </i> visualização de página
<i class = "material-icons custom"> pagamento </i> Forma de pagamento
<i class = "material-icons custom"> perm_camera_mic </i> perm_camera_mic
<i class = "material-icons custom"> perm_contact_cale </i> perm_contact_cale
<i class = "material-icons custom"> perm_data_settings </i> perm_data_settings
<i class = "material-icons custom"> perm_device_information </i> perm_device_information
<i class = "material-icons custom"> perm_identity </i> perm_identity
<i class = "material-icons custom"> perm_media </i> perm_media
<i class = "material-icons custom"> perm_phone_msg </i> perm_phone_msg
<i class = "material-icons custom"> perm_scan_wifi </i> perm_scan_wifi
<i class = "material-icons custom"> picture_in_picture </i> picture_in_picture
<i class = "material-icons custom"> play_for_work </i> play_for_work
<i class = "material-icons custom"> polímero </i> polímero
<i class = "material-icons custom"> power_settings_new </i> power_settings_new
<i class = "material-icons custom"> impressão </i> impressão
<i class = "material-icons custom"> query_builder </i> query_builder
<i class = "material-icons custom"> question_answer </i> Resposta da questão
<i class = "material-icons custom"> recibo </i> recibo
<i class = "material-icons custom"> resgatar </i> resgatar
<i class = "material-icons custom"> reordenar </i> reordenar
<i class = "material-icons custom"> report_problem </i> reportar problema
<i class = "material-icons custom"> restaurar </i> restaurar
<i class = "material-icons custom"> sala </i> quarto
<i class = "material-icons custom"> programação </i> cronograma
<i class = "material-icons custom"> pesquisa </i> pesquisa
<i class = "material-icons custom"> configurações </i> configurações
<i class = "material-icons custom"> settings_applications </i> settings_applications
<i class = "material-icons custom"> settings_bluetooth </i> settings_bluetooth
<i class = "material-icons custom"> settings_brightness </i> settings_brightness
<i class = "material-icons custom"> settings_cell </i> settings_cell
<i class = "material-icons custom"> settings_ethernet </i> settings_ethernet
<i class = "material-icons custom"> settings_input_antenna </i> settings_input_antenna
<i class = "material-icons custom"> settings_input_component </i> settings_input_component
<i class = "material-icons custom"> settings_input_hdmi </i> settings_input_hdmi
<i class = "material-icons custom"> settings_input_svideo </i> settings_input_svideo
<i class = "material-icons custom"> settings_overscan </i> settings_overscan
<i class = "material-icons custom"> settings_phone </i> settings_phone
<i class = "material-icons custom"> settings_power </i> settings_power
<i class = "material-icons custom"> settings_remote </i> settings_remote
<i class = "material-icons custom"> settings_voice </i> settings_voice
<i class = "material-icons custom"> loja </i> fazer compras
<i class = "material-icons custom"> shop_two </i> shop_two
<i class = "material-icons custom"> shopping_basket </i> Cesta de compras
<i class = "material-icons custom"> carrinho de compras </i> carrinho de compras
<i class = "material-icons custom"> speaker_notes </i> speaker_notes
<i class = "material-icons custom"> verificação ortográfica </i> verificação ortográfica
<i class = "material-icons custom"> star_rate </i> star_rate
<i class = "material-icons custom"> estrelas </i> estrelas
<i class = "material-icons custom"> loja </i> loja
<i class = "material-icons custom"> assunto </i> sujeito
<i class = "material-icons custom"> supervisor_account </i> supervisor_account
<i class = "material-icons custom"> swap_horiz </i> swap_horiz
<i class = "material-icons custom"> swap_vert </i> swap_vert
<i class = "material-icons custom"> swap_vertical_circle </i> swap_vertical_circle
<i class = "material-icons custom"> system_update_alt </i> system_update_alt
<i class = "material-icons custom"> guia </i> aba
<i class = "material-icons custom"> tab_unselected </i> tab_unselected
<i class = "material-icons custom"> cinemas </i> teatros
<i class = "material-icons custom"> thumb_down </i> thumb_down
<i class = "material-icons custom"> thumb_up </i> thumb_up
<i class = "material-icons custom"> thumbs_up_down </i> thumbs_up_down
<i class = "material-icons custom"> toc </i> toc
<i class = "material-icons custom"> hoje </i> hoje
<i class = "material-icons custom"> pedágio </i> Pedágio
<i class = "material-icons custom"> track_changes </i> alterações de percurso
<i class = "material-icons custom"> traduzir </i> traduzir
<i class = "material-icons custom"> trending_down </i> trending_down
<i class = "material-icons custom"> trending_flat </i> trending_flat
<i class = "material-icons custom"> trending_up </i> trending_up
<i class = "material-icons custom"> turn_in </i> transformou
<i class = "material-icons custom"> usuário_verificado </i> usuário verificado
<i class = "material-icons custom"> view_agenda </i> view_agenda
<i class = "material-icons custom"> view_array </i> view_array
<i class = "material-icons custom"> view_carousel </i> view_carousel
<i class = "material-icons custom"> view_column </i> view_column
<i class = "material-icons custom"> view_day </i> view_day
<i class = "material-icons custom"> view_headline </i> view_headline
<i class = "material-icons custom"> view_list </i> view_list
<i class = "material-icons custom"> view_module </i> view_module
<i class = "material-icons custom"> view_quilt </i> view_quilt
<i class = "material-icons custom"> view_stream </i> view_stream
<i class = "material-icons custom"> view_week </i> view_week
<i class = "material-icons custom"> visibilidade </i> visibilidade
<i class = "material-icons custom"> visibility_off </i> visibilidade_off
<i class = "material-icons custom"> trabalho </i> trabalhos
<i class = "material-icons custom"> youtube_searched_for </i> youtube_searched_for
<i class = "material-icons custom"> zoom_in </i> mais Zoom
<i class = "material-icons custom"> zoom_out </i> Reduzir o zoom