O que são os símbolos do Material Design?
Os símbolos do Material Design são nossos ícones mais recentes, consolidando mais de 2.500 glifos em um único arquivo de fonte com diversas variantes de design. Os símbolos estão disponíveis em três estilos e quatro eixos de fonte variáveis ajustáveis (preenchimento, peso, gradação e tamanho óptico). Confira o conjunto completo de símbolos do Material Design na Biblioteca Material Symbols.
Eixo FILL
O preenchimento permite modificar o estilo padrão do ícone. Um único ícone pode renderizar estados preenchidos e não preenchidos.
Para transmitir uma transição de estado, use o eixo de preenchimento para animação ou interação. Os valores são 0 para padrão ou 1 para totalmente preenchido. Além do eixo de peso, o preenchimento também afeta a aparência do ícone.
Eixo wght
Peso define a espessura do traço do símbolo, com um intervalo de pesos entre fino (100) e negrito (700). O peso também pode afetar o tamanho geral do símbolo.
Eixo GRAD
O peso e a grau afetam a espessura do símbolo. Os ajustes de gradação são mais detalhados que os de peso e têm um pequeno impacto no tamanho do símbolo.
A nota também está disponível em algumas fontes de texto. É possível combinar os níveis de classificação entre texto e símbolos para ter um efeito visual harmonioso. Por exemplo, se a fonte do texto tiver um valor de nota -25, os símbolos poderão fazer a correspondência com um valor adequado, como -25.
As notas podem ser usadas de acordo com diferentes necessidades:
Prioridade baixa (por exemplo, -25 grau): para reduzir o brilho de um símbolo claro em um fundo escuro, use uma nota baixa.
Prioridade alta (por exemplo, 200 graus): para destacar um símbolo, aumente a nota positiva.
Eixo opsz
Os tamanhos ópticos variam de 20 dp a 48 dp.
Para que a imagem tenha a mesma aparência em tamanhos diferentes, a espessura do traço (espessura) muda à medida que o tamanho do ícone aumenta. O tamanho óptico oferece uma maneira de ajustar automaticamente a espessura do traço ao aumentar ou diminuir o tamanho do símbolo.
Como encontrar símbolos do Material Design
Os símbolos do Material Design estão disponíveis em vários formatos e são adequados para diferentes tipos de projetos e plataformas, tanto para desenvolvedores nos apps quanto para designers em modelos ou protótipos.
Licenciamento
Os símbolos do Material Design estão disponíveis sob a Licença Apache Versão 2.0.
Navegação e download de ícones individuais
O conjunto completo de símbolos do Material Design está disponível na Biblioteca Material Symbols (link em inglês) nos formatos SVG ou PNG. Eles são adequados para Web, Android e iOS ou com qualquer ferramenta de design.
Repositório do Git
O repositório git (link em inglês) contém o conjunto completo de símbolos do Material Design no formato SVG.
$ git clone https://github.com/google/material-design-icons
Como usar símbolos do Material Design
Usar na Web
A fonte de símbolos do Material Design é a maneira mais fácil de incorporar símbolos do Material Design em projetos da Web.
Os ícones são empacotados em uma única fonte para que os desenvolvedores da Web possam incorporá-los facilmente com apenas algumas linhas de código.
Fonte estática com o Google Fonts
A maneira mais fácil de configurar fontes de ícones para uso em qualquer página da Web é usar o Google Fonts. Inclua esta linha única de HTML:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
O snippet acima inclui a configuração padrão para cada eixo, com peso em 400, tamanho óptico em 48, grade em 0 e preenchimento (também 0).
Use a API Fonts CSS para configurar diferentes valores de eixos. Confira os exemplos a seguir:
Fonte variável com a biblioteca Google Fonts
Para animar ícones por meio de CSS ou se quiser um controle mais preciso sobre os recursos do ícone, use a fonte variável de símbolos do Google. Usando intervalos, no formato number..number,
podemos carregar toda a fonte da variável. Confira o
suporte a fontes variáveis do "Can I Use" (link em inglês)
para entender se os usuários vão conseguir carregar a fonte variável, muito provavelmente. Veja alguns exemplos:
Ou até mesmo animá-los!
Hospedar a fonte automaticamente
Hospede a
fonte do ícone
em um local que você controla para decidir quando atualizar o recurso. Por
exemplo, se o URL for https://example.com/material-symbols.woff, adicione a
seguinte regra CSS:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Para renderizar a fonte corretamente, declare as regras CSS para renderizar o ícone. Essas regras normalmente são usadas como parte da folha de estilo da API Google Fonts, mas precisam ser incluídas manualmente nos seus projetos durante a hospedagem automática:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Como usar os ícones em HTML
Os exemplos fornecidos acima usam um recurso tipográfico chamado
ligaturas,
que permite renderizar um glifo de ícone simplesmente usando o nome textual dele. O
navegador da Web substitui automaticamente a ligadura do texto pelo vetor do ícone e
fornece um código mais legível do que a referência equivalente de caracteres numéricos. Por
exemplo, no seu HTML, você terá arrow_forward para representar um ícone,
em vez de . Para outros ícones, use a snake-case do nome do ícone
(ou seja, substitua os espaços por sublinhados).
Esse recurso é compatível com a maioria dos navegadores modernos, tanto em computadores quanto em dispositivos móveis. Consulte Suporte para ligaduras podem ser usadas para saber se seus usuários poderão processar ligaduras, muito provavelmente podem.
Se você precisa de suporte a navegadores que não oferecem suporte a ligaduras, especifique os ícones usando referências numéricas (também conhecidas como codepoints), como no exemplo abaixo:
Para encontrar os nomes dos ícones e os pontos de código na Biblioteca Material Symbols, selecione qualquer ícone e abra o painel de fontes. Cada fonte de ícone tem um índice de pontos de código no repositório git do Google Fonts, mostrando o conjunto completo de nomes e códigos de caracteres.
Como definir o estilo de ícones no Material Design
Esses ícones foram criados para seguir as diretrizes do Material Design e têm uma aparência melhor usando os tamanhos e cores recomendados. Os estilos abaixo facilitam a aplicação dos tamanhos, cores e estados de atividade recomendados.
Usar no Android
Na Biblioteca Material Symbols, todos os ícones estão no formato Vector Drawable. Para saber mais, consulte a documentação do Android Vector Asset Studio.
Usar no iOS
Os ícones também estão disponíveis no formato de símbolos da Apple. Para saber mais sobre eles, consulte a visão geral e a orientação de uso oficiais dos símbolos da Apple.
Usar no Flutter
A compatibilidade do Flutter com símbolos do Material Design está planejada. Fique atento às atualizações.