O que são 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 um único arquivo de fonte com uma ampla variedade de variantes de design. Os símbolos estão disponíveis em três estilos e quatro eixos de fonte ajustáveis (preenchimento, peso, gradação e tamanho óptico). Consulte o conjunto completo de símbolos do Material Design na Biblioteca de símbolos do Material Design.
Eixo FILL
O preenchimento permite modificar o estilo de ícone padrão. Um único ícone pode para renderizar estados não preenchidos e 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 o padrão ou 1 para o preenchimento completo. Com o peso eixo, o preenchimento também afeta a aparência do ícone.
Eixo wght
O peso define a espessura do traço do símbolo, com uma faixa de espessuras entre fino (100) e negrito (700). O peso também pode afetar o tamanho total símbolo.
Eixo GRAD
O peso e o grau afetam a espessura de um símbolo. Os ajustes na avaliação são mais granulares do que ajustes ao peso e têm um pequeno impacto no tamanho o símbolo.
A nota também está disponível em algumas fontes de texto. É possível corresponder os níveis de classificação textos e símbolos para um efeito visual harmonioso. Por exemplo, se a fonte do texto tiver um valor de nota -25, os símbolos podem corresponder a um valor adequado, por exemplo, -25.
Você pode usar a nota para necessidades diferentes:
Baixa ênfase (por exemplo, -25 grau): para reduzir o brilho de um símbolo claro em uma imagem escura fundo, usam uma nota baixa.
Ênfase alta (por exemplo, nota 200): para destacar um símbolo, aumente o sinal positivo. nota
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 muda conforme o tamanho do ícone é dimensionado. O tamanho óptico oferece uma maneira de ajustar a espessura do traço ao aumentar ou diminuir o tamanho do símbolo.
Como receber 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 em seus aplicativos designers em seus modelos ou protótipos.
Licenciamento
Os símbolos do Material Design estão disponíveis no Licença do 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 de símbolos do Material Design nos formatos SVG ou PNG. Eles são adequados para Web, Android, iOS ou com ferramentas de design.
Repositório do Git
A Repositório Git contém o conjunto completo de símbolos do Material Design em 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 Web possam facilmente incorporar esses ícones 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 é através Fontes do Google. Inclua esta única linha 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 aos 48 anos, graduar em 0 e preenchimento (também 0.)
Use o API Fonts CSS para configurar diferentes valores de eixos. Confira os exemplos a seguir:
.Fonte variável com o Google Fonts
Se você estiver animando ícones via CSS ou quiser um controle mais preciso sobre os recursos dos ícones, use
fonte variável dos símbolos do Google. O uso de intervalos, no formato number..number,
podemos carregar toda a fonte da variável. Finalizar compra
Posso usar fontes variáveis do Google?
para entender se seus usuários conseguem carregar a fonte variável, a maioria
as chances de eles serem. Veja alguns exemplos:
Ou até mesmo animá-los!
Auto-hospedagem da fonte
Hospede o
fonte do ícone
em um local que você controla para decidir quando atualizar o recurso. Para
exemplo, se o URL for https://example.com/material-symbols.woff, adicione o
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. Esses são normalmente veiculadas como parte da folha de estilo da API do Google Fonts, mas precisam ser incluídas manualmente nos projetos na auto-hospedagem:
.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 a renderização de um glifo de ícone simplesmente usando seu nome textual. A
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 de caracteres numéricos equivalente. Para
exemplo, no HTML, você terá arrow_forward para representar um ícone,
em vez de . Para outros ícones, use snake case (em inglês) do nome do ícone.
(ou seja, substitua espaços por sublinhados).
Esse recurso é compatível com a maioria dos navegadores modernos, tanto em computadores quanto em dispositivos móveis. dispositivos. Consulte Posso usar o suporte das ligaduras? para saber se os usuários serão capazes de processar ligaduras, provavelmente eles conseguem.
Se você precisa oferecer suporte a navegadores que não aceitam ligaduras, especifique o usando referências de caracteres numéricos (também conhecidos como pontos de código), como no exemplo abaixo:
Encontre os nomes de ícones e os pontos de código no Biblioteca de símbolos do Material Design selecionando qualquer ícone e abrindo o painel de fonte do ícone. Cada fonte de ícone tem um índice de pontos de código na API Google Fonts Repositório Git mostrando o conjunto completo de nomes e códigos de caracteres.
Como definir o estilo de ícones no Material Design
Esses ícones foram projetados para seguir Diretrizes do Material Design, e eles ficam melhores com os tamanhos e cores de ícones recomendados. Estilos abaixo facilitam a aplicação de nossos 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, confira a Documentação do Vector Asset Studio do Android.
Usar no iOS
Os ícones também estão disponíveis no formato Apple Symbols. Para saber mais, confira os símbolos oficiais da Apple visão geral e orientações de uso.
Usar no Flutter
A compatibilidade do Flutter com símbolos do Material Design está planejada. Acompanhe as atualizações.