Material - Ícones de Notificação

Este capítulo explica o uso dos ícones de Notificação (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 Notificaçã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"> adb </i> adb
<i class = "material-icons custom"> flight_seat_flat </i> companhia aérea_flat
<i class = "material-icons custom"> flight_seat_flat_angled </i> irline_seat_flat_angled
<i class = "material-icons custom"> flight_seat_individual_suite </i> companhia_assento_individual_suite
<i class = "material-icons custom"> flight_seat_legroom_reduced </i> irline_seat_legroom_reduced
<i class = "material-icons custom"> flight_seat_recline_extra </i> irline_seat_recline_extra
<i class = "material-icons custom"> airline_seat_recline_normal </i> Airlines_seat_recline_normal
<i class = "material-icons custom"> bluetooth_audio </i> bluetooth_audio
<i class = "material-icons custom"> número_confirmação </i> número de confirmação
<i class = "material-icons custom"> disc_full </i> disc_full
<i class = "material-icons custom"> do_not_disturb </i> não perturbe
<i class = "material-icons custom"> do_not_disturb_alt </i> do_not_disturb_alt
<i class = "material-icons custom"> drive_eta </i> drive_eta
<i class = "material-icons custom"> evento_disponível </i> event_available
<i class = "material-icons custom"> event_busy </i> event_busy
<i class = "material-icons custom"> event_note </i> event_note
<i class = "material-icons custom"> folder_special </i> folder_special
<i class = "material-icons custom"> live_tv </i> TV ao vivo
<i class = "material-icons custom"> mms </i> mms
<i class = "material-icons custom"> mais </i> Mais
<i class = "material-icons custom"> rede_locked </i> network_locked
<i class = "material-icons custom"> ondemand_video </i> ondemand_video
<i class = "material-icons custom"> personal_video </i> video_pessoal
<i class = "material-icons custom"> phone_bluetooth_speaker </i> phone_bluetooth_speaker
<i class = "material-icons custom"> phone_forwarded </i> phone_forwarded
<i class = "material-icons custom"> phone_in_talk </i> phone_in_talk
<i class = "material-icons custom"> phone_locked </i> phone_locked
<i class = "material-icons custom"> phone_missed </i> phone_missed
<i class = "material-icons custom"> phone_paused </i> phone_paused
<i class = "material-icons custom"> poder </i> poder
<i class = "material-icons custom"> sd_card </i> cartão SD
<i class = "material-icons custom"> sim_card_alert </i> sim_card_alert
<i class = "material-icons custom"> sms </i> SMS
<i class = "material-icons custom"> sms_failed </i> sms_failed
<i class = "material-icons custom"> sincronizar </i> sincronizar
<i class = "material-icons custom"> sync_disabled </i> sync_disabled
<i class = "material-icons custom"> sync_problem </i> sync_problem
<i class = "material-icons custom"> atualização_do_sistema </i> atualização do sistema
<i class = "material-icons custom"> tap_and_play </i> tap_and_play
<i class = "material-icons custom"> time_to_leave </i> hora de partir
<i class = "material-icons custom"> vibração </i> vibração
<i class = "material-icons custom"> chat de voz </i> Chat de voz
<i class = "material-icons custom"> vpn_lock </i> vpn_lock
<i class = "material-icons custom"> wc </i> banheiro
<i class = "material-icons custom"> wi-fi </i> Wi-fi