Google Icons - Parte 1

Acessar o site

O Google Icons é uma livraria de ícones do Google, que oferece uma variedade quase infinita de ícones. Este site possui dois tipos de ícones, os "Material Icons" e os "Material Symbols". Material Symbols são os ícones mais novos do Google, com um visual mais limpo.

Aqui, veremos como usar os dois.

Material Icons

Para começar a usar os ícones, primeiramente é necessário copiar este código, e colar dentro do head.

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Este link engloba todos os estilos de ícones dos Material Icons, portanto assim não terá problemas no futuro caso queira usar ícones de estilos diferentes.

Depois de escolher algum ícone, você verá os códigos ao lado:

Você pode copiar o código destacado na imagem e colar em algum lugar do seu site, ou adicionar manualmente com span ou i

Neste caso, o nome deste ícone é "sports_volleyball".

sports_volleyball

Esses são os estilos de ícones que você pode escolher.

Para que os ícones funcionem, é necessário adicioná-los no CSS, com a classe .material-icons-estilo assim como na imagem abaixo.

Veja na próxima parte como usar os Google Symbols, que são ícones mais recentes e com visual mais moderno.