Esta página foi traduzida pela API Cloud Translation.

Guia sobre símbolos do Material Design

O que são os símbolos do Material Design?

Os Símbolos do Material Design são nossos ícones mais recentes, que consolidam mais de 2.500 glifos em um único arquivo de fonte com uma ampla gama de 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, grau e tamanho óptico). Consulte o conjunto completo de símbolos do Material Design na página Símbolos do Material Biblioteca.

Eixo `FILL`

O preenchimento permite modificar o estilo de ícone padrão. 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`

O peso define a espessura do traço do símbolo, com uma variedade de pesos entre fino (100) e negrito (700). O peso também pode afetar o tamanho geral do símbolo.

Eixo `GRAD`

Visualização da
grade

O peso e o grau afetam a espessura de um símbolo. Os ajustes de grau são mais detalhados do que os ajustes de peso e têm um pequeno impacto no tamanho do símbolo.

A classificação também está disponível em algumas fontes de texto. Você pode combinar os níveis de graduação entre texto e símbolos para um efeito visual harmonioso. Por exemplo, se a fonte de texto tiver um valor de grau de -25, os símbolos poderão corresponder a um valor adequado, digamos -25.

Você pode usar a nota para necessidades diferentes:

Baixo nível de ênfase (por exemplo, -25): para reduzir o brilho de um símbolo claro em um plano de fundo escuro, use um nível baixo.

Ê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 automaticamente o peso do traço quando você aumenta ou diminui 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 apps quanto para designers em modelos ou protótipos.

Licenciamento

Os Símbolos do Material 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 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

O repositório git 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 do Material Symbols é a maneira mais fácil de incorporar os Symbols 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 do Google Fontes. Incluir 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, óptica tamanho aos 48 anos, graduar em 0 e preenchimento (também 0.)

Use o CSS de fontes API para e configurar valores de eixos diferentes. Confira os exemplos a seguir:

Fonte variável com o Google Fonts

Se você estiver animando ícones usando CSS ou quiser controlar melhor os recursos do ícone, use a fonte variável Google Symbols. Usando intervalos, no formato number..number, é possível carregar toda a fonte variável. Confira Posso usar fontes variáveis suporte 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!

Otimizar a fonte do ícone

Subconjunto da fonte para incluir apenas os ícones relevantes para seu aplicativo usando o parâmetro de consulta &icon_names, usando uma lista de nomes de ícones (ligaduras) ordenada alfabeticamente e separada por vírgulas.

Não recomendado: o uso das configurações padrão carrega mais de 3.800 ícones. Payload da fonte: 295 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
```
Recomendado: especificar nomes de ícones para carregar apenas os ícones necessários. Payload da fonte: 1,7 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block
```
Criar instância dos eixos de fonte da variável para incluir apenas aqueles que seu aplicativo usará. A maioria dos aplicativos só precisa de algumas variações dos eixos.

Não recomendado: a falta de configuração dos eixos carrega a fonte estática padrão (peso 400, tamanho óptico 24, arredondado 50, grau 0, preenchimento 0). A inclusão completa de todos os eixos de fonte variáveis geralmente é desnecessária e aumenta o payload. Payload da fonte: 7,9 MB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100
```
Recomendado: uma combinação específica de eixos é usada. Apenas como exemplo, o valor 'FILL' completo eixo fornece transições CSS entre estados e "ROND" 100 é o número escolhido do projeto. Payload da fonte: 2,6 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
```

Autohospedar a fonte

Hospede a fonte de ícones 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 regra CSS a seguir:

@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 do CSS para renderizar o ícone. Essas regras normalmente são exibidas como parte da folha de estilos da API Google Fonts, mas precisam ser incluídas manualmente nos seus projetos quando você hospeda por conta própria:

.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 usando seu nome textual. A Web de dados 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. Por exemplo, no HTML, você terá arrow_forward para representar um ícone, em vez de . Para outros ícones, use o formato de vírgula inglesa do nome do ícone (ou seja, substitua os espaços por sublinhados).

Esse recurso é compatível com a maioria dos navegadores modernos em computadores e dispositivos móveis. Consulte Posso usar as ligaduras suporte 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 e os codepoints dos ícones na Biblioteca de símbolos do Material Design selecionando qualquer ícone e abrindo o painel de fontes de ícones. Cada fonte de ícone tem um índice de pontos de código no git do Google Fonts repositório 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 as diretrizes do Material Design e ficam melhores quando usados com os tamanhos e cores recomendados. Os estilos abaixo facilitam a aplicação dos nossos tamanhos, cores e estados de atividade recomendados.

Usar no Android

Na biblioteca de símbolos do Material Design, todos os ícones estão no formato drawable vetorial. Para saber mais, consulte a documentação do Android Vector Asset Studio.

Uso no iOS

Os ícones também estão disponíveis no formato Apple Symbols. Para saber mais sobre eles, confira a visão geral oficial dos Símbolos da Apple e as orientações de uso.

Usar no Flutter

A compatibilidade com o Flutter para símbolos do Material Design está planejada. Acompanhe as atualizações.