O Material Design do Google trouxe uma mudança drástica em seus serviços com cores contrastantes e animações interativas. Com a alternância, vieram ícones criados para combinar com o resto do ecossistema. O Google disponibilizou todos os ícones gratuitamente em seus sites, aqui mostramos como baixá-los e usá-los.
Baixe ícones de design de materiais gratuitos
Para baixar os ícones temáticos do Material, acesse o repositório do Google. Role para baixo e você descobrirá vários ícones disponíveis para uso. Você pode pesquisar usando a barra de ferramentas ou selecionar o que você precisa rolando, o que obviamente consumirá muito do seu tempo. Depois de fazer isso, uma barra horizontal aparecerá na parte inferior contendo o nome do ícone e algumas opções que você pode ajustar.
Dica: Se você precisar baixar todos os ícones do material, acesse este link.
Você pode especificar o tamanho, se deseja um ícone preto ou branco e, finalmente, pode baixá-los no formato SVG ou PNG. Infelizmente, existem apenas duas variantes de cores disponíveis. No entanto, você pode usar o Editor SVG para personalizar um ícone SVG e alterar os tons para o mesmo.
Altere a cor dos ícones projetados pelo Material usando o Editor SVG
Para modificar a cor do ícone no editor SVG, clique no ícone do balde na parte inferior e selecione a cor desejada. Toque na imagem do ícone depois de importá-la do menu suspenso de edição de SVG no canto superior esquerdo. Uma vez feito, exporte-o da mesma lista suspensa que vimos antes. Se você precisar editar ícones localmente, você pode baixar o SVG através deste link.
O Google publicou um guia detalhado para usar esses ícones em sua página do Github. Ele também inclui detalhes de licenciamento, trechos de código iOS/Android para começar e alguns métodos para implementar ícones de material em seu site com exemplos.
Isso foi tudo. Deixe-nos saber se perdemos algo na seção de comentários abaixo.