Material - Ícones AV

Este capítulo explica o uso dos ícones AV (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 AV do Google (Material). 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"> airplay </i> jogo aéreo
<i class = "material-icons custom"> álbum </i> álbum
<i class = "material-icons custom"> av_timer </i> av_timer
<i class = "material-icons custom"> closed_caption </i> legenda
<i class = "material-icons custom"> equalizador </i> equalizador
<i class = "material-icons custom"> explícito </i> explícito
<i class = "material-icons custom"> fast_forward </i> fast_forward
<i class = "material-icons custom"> fast_rewind </i> fast_rewind
<i class = "material-icons custom"> forward_10 </i> forward_10
<i class = "material-icons custom"> forward_30 </i> forward_30
<i class = "material-icons custom"> forward_5 </i> forward_5
<i class = "material-icons custom"> jogos </i> jogos
<i class = "material-icons custom"> hd </i> hd
<i class = "material-icons custom"> audiência </i> audição
<i class = "material-icons custom"> alta_qualidade </i> alta qualidade
<i class = "material-icons custom"> library_add </i> library_add
<i class = "material-icons custom"> library_books </i> library_books
<i class = "material-icons custom"> library_music </i> library_music
<i class = "material-icons custom"> loop </i> ciclo
<i class = "material-icons custom"> microfone </i> microfone
<i class = "material-icons custom"> mic_none </i> mic_none
<i class = "material-icons custom"> mic_off </i> mic_off
<i class = "material-icons custom"> filme </i> filme
<i class = "material-icons custom"> pause_circle_outline </i> pause_circle_outline
<i class = "material-icons custom"> new_releases </i> novos lançamentos
<i class = "material-icons custom"> not_interested </i> não interessado
<i class = "material-icons custom"> pausa </i> pausa
<i class = "material-icons custom"> pause_circle_filled </i> pause_circle_filled
<i class = "material-icons custom"> play_arrow </i> play_arrow
<i class = "material-icons custom"> play_circle_filled </i> play_circle_filled
<i class = "material-icons custom"> play_circle_outline </i> play_circle_outline
<i class = "material-icons custom"> playlist_add </i> playlist_add
<i class = "material-icons custom"> fila </i> fila
<i class = "material-icons custom"> queue_music </i> queue_music
<i class = "material-icons custom"> rádio </i> rádio
<i class = "material-icons custom"> recent_actors </i> recent_actors
<i class = "material-icons custom"> repetir </i> repetir
<i class = "material-icons custom"> repeat_one </i> repeat_one
<i class = "material-icons custom"> repetir </i> repetir
<i class = "material-icons custom"> airplay </i> replay_10
<i class = "material-icons custom"> replay_30 </i> replay_30
<i class = "material-icons custom"> replay_5 </i> replay_5
<i class = "material-icons custom"> embaralhar </i> embaralhar
<i class = "material-icons custom"> skip_next </i> skip_next
<i class = "material-icons custom"> skip_previous </i> skip_previous
<i class = "material-icons custom"> soneca </i> soneca
<i class = "material-icons custom"> sort_by_alpha </i> sort_by_alpha
<i class = "material-icons custom"> pare </i> Pare
<i class = "material-icons custom"> legendas </i> legendas
<i class = "material-icons custom"> surround_sound </i> o som ao Redor
<i class = "material-icons custom"> video_library </i> video_library
<i class = "material-icons custom"> videocam </i> videocam
<i class = "material-icons custom"> videocam_off </i> videocam_off
<i class = "material-icons custom"> volume_down </i> volume baixo
<i class = "material-icons custom"> volume_mute </i> volume_mute
<i class = "material-icons custom"> volume_off </i> volume_off
<i class = "material-icons custom"> volume_up </i> aumentar o volume
<i class = "material-icons custom"> web </i> rede