Ícones de Material

O Google fornece um conjunto de 750 ícones projetados sob "diretrizes de design de material" e são conhecidos como Material Designícones. Esses ícones são simples e oferecem suporte a todos os navegadores modernos. Como esses ícones são baseados em vetores, eles também são escalonáveis. Para usar esses ícones, temos que carregar a fonte (biblioteca)material-icons.

Carregando a fonte (biblioteca)

Para carregar a biblioteca de ícones de materiais, copie e cole a seguinte linha na seção <head> de uma página da web.

<head>
   <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>

Usando o ícone

Os ícones de materiais do Google fornecem uma longa lista de ícones. Escolha qualquer um deles e adicione o nome da classe do ícone a qualquer elemento HTML dentro da tag <body>. No exemplo a seguir, usamos o ícone chamadoaccessibility que pertence à categoria de ação.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

Ele produzirá a seguinte saída -

Definindo o tamanho

Você pode aumentar ou diminuir o tamanho de um ícone definindo seu tamanho no CSS e usando-o junto com o nome da classe conforme mostrado abaixo. No exemplo a seguir, declaramos o tamanho como 6 em.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

Ele produzirá a seguinte saída -

Definindo a cor

Você pode usar o CSS para definir a cor de um ícone. O exemplo a seguir mostra como você pode alterar a cor de um ícone chamadoaccessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Ele produzirá a seguinte saída -

Lista de categorias

A fonte Material Icons do Google oferece 519 ícones nas seguintes categorias -

Ícones de ação
Ícones de Alerta
Ícones AV
Ícones de comunicação
Ícones de conteúdo
Ícones de dispositivos
Ícones do Editor
Ícones de arquivo
Ícones de Hardware
Ícones de imagem
Ícones de mapas
Ícones de navegação
Ícones de Notificação
Ícones Sociais
Alternar ícones

Para usar qualquer um desses ícones, você deve substituir o nome da classe nos programas fornecidos neste capítulo pelo nome da classe do ícone desejado. Nos próximos capítulos desta unidade (ícones de materiais), explicamos por categoria o uso e as respectivas saídas de vários ícones de materiais.