Google Icons - Parte 2

Acessar o site

Para trocar entre os Material Icons e Material Symbols, clique nesta aba e escolha:

Os Material Symbols possuem uma instalação similar, porém os Symbols são customizáveis:


Para adicionar os símbolos, clique em um ícone e copie o código. Ele deve ser colado dentro do head.

tips_and_updates

Diferente dos Material Icons, cada ícone vai gerar um código diferente automaticamente, incluindo as customizações.

Agora, copie o código de CSS. Para usá-lo em um arquivo de CSS externo, deve remover a tag style.


Agora para mudar a cor e tamanho, adicione os comandos embaixo das configurações padrões.

play_shapes

CSS

HTML

Os símbolos seguem as mesmas regras vistas na página anterior, apenas trocando "icons" por "symbols" nos comandos.

Os Symbols tem uma instalação um pouco mais simples, e os ícones tem um visual mais bonito.