Material - Ícones Sociais

Este capítulo explica o uso dos ícones sociais (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 sociais (materiais) 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"> bolo </i> bolo
<i class = "material-icons custom"> domínio </i> domínio
<i class = "material-icons custom"> grupo </i> grupo
<i class = "material-icons custom"> group_add </i> group_add
<i class = "material-icons custom"> location_city </i> location_city
<i class = "material-icons custom"> humor </i> humor
<i class = "material-icons custom"> mood_bad </i> mau humor
<i class = "material-icons custom"> notificações </i> notificações
<i class = "material-icons custom"> notificações_ativas </i> notificações_ativas
<i class = "material-icons custom"> notifications_none </i> notificações_none
<i class = "material-icons custom"> notifications_off </i> notificações_off
<i class = "material-icons custom"> notifications_paused </i> notificações_paused
<i class = "material-icons custom"> páginas </i> Páginas
<i class = "material-icons custom"> modo da festa </i> party_mode
<i class = "material-icons custom"> pessoas </i> pessoas
<i class = "material-icons custom"> people_outline </i> people_outline
<i class = "material-icons custom"> pessoa </i> pessoa
<i class = "material-icons custom"> person_add </i> person_add
<i class = "material-icons custom"> person_outline </i> person_outline
<i class = "material-icons custom"> mais_um </i> mais um
<i class = "material-icons custom"> enquete </i> votação
<i class = "material-icons custom"> público </i> público
<i class = "material-icons custom"> escola </i> escola
<i class = "material-icons custom"> compartilhar </i> compartilhar
<i class = "material-icons custom"> whatshot </i> o que há de novo