Ionicons
Como implementar ícones facilmente.
Acessar o sitePara começar a usar os ícones, primeiramente é necessário copiar o código abaixo, fornecido pelo próprio site. (Disponível também na aba "Usage" no site).
Cole o código no final do seu código, logo antes da tag de fechamento do body
Agora, vamos implementar um ícone. Pegaremos um ícone e colocaremos ao lado de um texto. Neste caso, pegamos um ícone de home (página inicial).
Depois de clicar em um ícone, basta clicar no código que será aparecerá na parte inferior da tela, para copia-lo automaticamente.
Depois de copiar, agora basta colar o código em qualquer lugar do seu site. Aqui, vamos posicioná-la em um botão.
CSS:
HTML:
Resultado:
Não se esqueça de adicionar os comandos de centralização align-items:center; e justify-content:center; no botão, para que o ícone fique alinhado com o texto.
Agora, vamos aumentar o tamanho e a cor do ícone. Para isso é necessário criar a tag ion-icon no css.
CSS:
HTML:
Resultado:
Agora, vamos mudar os estilos de ícone. Para trocar, basta clicar em um dos estilos destacados na imagem abaixo, e copiar o código.
Para mudar manualmente, basta trocar o nome do estilo:
Outline (sem cor de fundo)
Filled (Preenchido)
Sharp (pontas quadradas)
Para mudar para o estilo filled, basta deixar apenas o nome do ícone.
Os ícones podem ser posicionados em qualquer lugar do site, veja aqui mais exemplos de ícones:
Prós e contras
Ícones de marcas e empresas, algo que não existe no Google Icons.
Fácil implementação e customização dos ícones.
Não possui uma variedade tão grande de ícones como no Google Icons.
Veja Google Icons