Uma visão geral dos ícones do Material Design, onde conseguir e como integrá-los aos seus projetos.
O que são ícones do Material Design?
Os ícones do sistema do Material Design são simples, modernos, intuitivos e, às vezes, excêntricos. Cada ícone é criado usando nossas diretrizes de design para representar de forma simples e mínima os conceitos universais usados com frequência em uma interface. Esses ícones foram otimizados para exibição de boa qualidade em todas as plataformas e resoluções comuns para garantir a legibilidade e a clareza em tamanhos grandes e pequenos.
Veja o conjunto completo de ícones do Material Design na Biblioteca de ícones do Material Design (link em inglês).
Como receber ícones
Os ícones estão disponíveis em vários formatos e são adequados para diferentes tipos de projetos e plataformas, para desenvolvedores de apps e para designers em modelos ou protótipos.
Licenciamento
Disponibilizamos esses ícones para você incorporá-los aos seus produtos sob a Licença Apache Versão 2.0. Fique à vontade para remixar e compartilhar novamente esses ícones e documentação nos seus produtos. Seria ótimo receber uma atribuição na tela about do seu app, mas ela não é obrigatória.
Navegação e download de ícones individuais
O conjunto completo de ícones do Material Design está disponível na biblioteca de ícones do Material Design (link em inglês). Os ícones estão disponíveis para download em SVG ou PNGs, formatos adequados para projetos da Web, Android e iOS ou para inclusão em ferramentas de designer.
Fazendo o download de tudo
Obtenha o arquivo zip estável mais recente (aproximadamente 310 MB) de todos os ícones ou a versão de ponta do mestre.
Repositório Git
Os ícones do Material Design estão disponíveis no repositório git (link em inglês), que contém o conjunto completo de ícones, incluindo todos os vários formatos que estão disponíveis.
$ git clone https://github.com/google/material-design-icons/
Fonte do ícone para a Web
A fonte do ícone do Material Design é a maneira mais fácil de incorporar ícones a projetos da Web. Empacotamos todos os ícones do Material Design em uma única fonte, que aproveita os recursos de renderização tipográfica dos navegadores modernos para que os desenvolvedores da Web possam incorporar facilmente esses ícones com apenas algumas linhas de código.
O uso da fonte não é apenas o método mais conveniente, mas também é eficiente e tem uma ótima aparência:
- Mais de 900 ícones em um único arquivo pequeno.
- Veiculado de servidores do Google Web Font ou pode ser auto-hospedado.
- Compatível com todos os navegadores da Web modernos.
- Coloridas, dimensionadas e posicionadas inteiramente com CSS.
- Baseado em vetor: tenha uma ótima aparência em qualquer escala, telas de retina e telas com baixo dpi.
A fonte do ícone pesa apenas 42 KB no menor formato woff2 e 56 KB no formato woff padrão. Em comparação, os arquivos SVG compactados com gzip costumam ter cerca de 62 KB de tamanho, mas isso pode ser reduzido consideravelmente com a compilação apenas dos ícones necessários em um único arquivo SVG com sprites de símbolos.
Método de configuração 1. Usar pelo Google Fonts
A maneira mais fácil de configurar fontes de ícones para uso em qualquer página da Web é usar o Google Fonts. Você só precisa incluir uma única linha de HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Semelhante a outras Google Web Fonts, o CSS correto será exibido para ativar a fonte "Ícones do Material Design" específica do navegador.
Uma outra classe CSS será declarada com o nome .material-icons.
Qualquer elemento que use essa classe terá o CSS correto para renderizar esses ícones da fonte da Web.
Método de configuração 2. Autohospedagem
Se você quiser hospedar a própria fonte da Web por conta própria, é necessário fazer outras configurações.
Hospede a fonte do ícone em um local, por exemplo, https://example.com/material-icons.woff e adicione a seguinte regra CSS:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
Além disso, as regras de CSS para renderizar o ícone precisarão ser declaradas para renderizar a fonte corretamente. Essas regras normalmente são veiculadas como parte da folha de estilo Google Web Fonts, mas precisam ser incluídas manualmente nos seus projetos ao hospedar a fonte:
.material-icons {
font-family: 'Material Icons';
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;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Como usar os ícones em HTML
É fácil incorporar ícones à sua página da Web. Aqui está um pequeno exemplo:
rosto
<span class="material-icons">face</span>
Esse exemplo usa um recurso tipográfico chamado ligaturas, que permite renderizar um glifo de ícone simplesmente usando o nome textual dele. A substituição é feita automaticamente pelo navegador da Web e fornece um código mais legível do que a referência equivalente a caracteres numéricos.
Esse recurso é compatível com a maioria dos navegadores modernos, tanto em computadores quanto em dispositivos móveis.
| Navegador | Versão compatível com ligaduras |
|---|---|
| Google Chrome | 11 |
| Mozilla Firefox | 3.5 |
| Apple Safari | 5 |
| Microsoft IE | 10 |
| Microsoft Edge | 18 |
| Opera | 15 |
| Safari da Apple | iOS 4.2 |
| Navegador do Android | 3.0 |
Para navegadores que não são compatíveis com ligaduras, volte a especificar os ícones usando referências numéricas de caracteres, como no exemplo abaixo:
<span class="material-icons"></span>Para encontrar os nomes e os pontos de código na biblioteca de ícones do Material Design (link em inglês), selecione qualquer ícone e abra o painel de fontes. Cada fonte de ícone tem um índice de codepoints no nosso repositório git que mostra o conjunto completo de nomes e códigos de caracteres (neste link).
Como definir o estilo de ícones no Material Design
Esses ícones foram criados para seguir as diretrizes do Material Design (link em inglês) e têm uma aparência melhor usando os tamanhos e cores recomendados de ícone. Os estilos abaixo facilitam a aplicação dos tamanhos, cores e estados de atividade recomendados.
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Tamanho
Embora os ícones na fonte possam ser dimensionados para qualquer tamanho, de acordo com as diretrizes para ícones do Material Design (link em inglês), recomendamos que eles sejam mostrados em 18, 24, 36 ou 48 pixels. O padrão é 24 px.
Regras do CSS para as diretrizes padrão de tamanho do Material Design:
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
Os ícones do Material Design têm melhor aparência em 24px, mas se um ícone precisar ser exibido em um tamanho alternativo, o uso das regras CSS acima pode ajudar:
<span class="material-icons md-18">face</span><span class="material-icons md-24">face</span><span class="material-icons md-36">face</span><span class="material-icons md-48">face</span>Colorir
O uso da fonte do ícone facilita a estilização de um ícone em qualquer cor. De acordo com as diretrizes para ícones do Material Design (link em inglês), recomendamos usar preto a 54% de opacidade ou branco a 100% de opacidade ao mostrá-los em fundos claros ou escuros, respectivamente. Se um ícone estiver desativado ou inativo, use preto em 26% ou branco em 30% para fundos claros e escuros, respectivamente.
Veja alguns exemplos que usam os estilos CSS do Material Design descritos acima:
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Exemplo de desenho de um ícone em um fundo claro com primeiro plano escuro:
<span class="material-icons md-dark">face</span><span class="material-icons md-dark md-inactive">face</span>Exemplo de desenho de um ícone em um fundo escuro com uma cor clara no primeiro plano:
<span class="material-icons md-light">face</span><span class="material-icons md-light md-inactive">face</span>Para definir uma cor personalizada para o ícone, defina uma regra de CSS especificando a cor desejada para a fonte:
.material-icons.orange600 { color: #FB8C00; }
e use a classe para se referir ao ícone:
<span class="material-icons orange600">face</span>Imagens de ícones para a Web
Os ícones do Material Design também estão disponíveis como imagens normais nos formatos PNG e SVG.
SVG
Os ícones de material são fornecidos como SVGs adequados para projetos da Web. É possível fazer o download de ícones individuais na biblioteca de ícones do Material Design (link em inglês). Os SVGs também estão disponíveis nos ícones do Material Design do repositório git (link em inglês) no caminho:
material-design-icons/src/
Por exemplo, os ícones para mapas estão em src/maps:
material-design-icons/src/maps/
Se um site tiver vários ícones em uso, é recomendável criar folhas de sprite a partir das imagens. Para ver mais informações, consulte a documentação no diretório de sprites do repositório git.
PNG
PNG é a forma mais tradicional de exibir ícones na web. Nossos downloads da biblioteca de ícones do Material Design oferecem densidade simples e dupla para cada ícone. Eles são mencionados como 1x e 2x, respectivamente, no download. Os ícones também estão disponíveis no repositório git em:
material-design-icons/png/
Se um site tiver vários ícones em uso, é recomendável criar folhas de sprite a partir das imagens. Para ver mais informações, consulte as recomendações no diretório de sprites no repositório git.
Ícones para Android
Os PNGs adequados para Android estão disponíveis na biblioteca de ícones do Material Design (link em inglês). Como eles vêm em todas as densidades de tela com suporte, devem ter uma boa aparência em qualquer dispositivo.
Eles também estão disponíveis no repositório git de ícones do Material Design (link em inglês) na mesma combinação de cores e tamanhos, nomeado da seguinte maneira:
No momento, o drawable vetorial só está disponível como um ícone preto de 24 dp. Isso se aplica à compatibilidade com nosso tamanho de ícone mais padrão. Para renderizar o ícone em uma cor diferente, use a tonalidade de drawable disponível no Android Lollipop.
Ao usar o drawable vetorial, pode não ser necessário incluir o PNG de densidade xxxhdpi, porque é improvável que um dispositivo com suporte a essa densidade de tela não ofereça suporte a drawables de vetor.
Ícones para iOS
Os ícones do Material Design também funcionam bem em apps iOS. Tanto na biblioteca de ícones do Material Design quanto no repositório git (link em inglês), esses ícones são empacotados em imagesets do Xcode que funcionam facilmente com os catálogos de recursos do Xcode (xcassets). Esses conjuntos de imagens podem ser adicionados a qualquer catálogo de recursos do Xcode arrastando-os para o Xcode no catálogo de recursos ou copiando a pasta para a pasta xcasset.
O conjunto de imagens contém imagens de densidade única, dupla e tripla (1x, 2x, 3x) para que funcionem em todas as densidades de tela conhecidas do iOS. Ícones pretos e brancos são fornecidos, mas recomendamos o uso de UIImage's imageWithRendererMode com UIImageRenderingModeAlwaysTemplate, que permite que a imagem seja usada como uma máscara alfa que possa ser colorida em qualquer cor possível.
Exemplo de Objective-C:
UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
[[UIImage imageNamed:@"ic_close"]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];
Exemplo no Swift:
let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)
Ícones em RTL
Idiomas como árabe e hebraico são lidos da direita para a esquerda (RTL, na sigla em inglês). Em idiomas RTL, as IUs devem ser espelhadas para exibir a maioria dos elementos em RTL. Quando uma interface do usuário é espelhada para RTL, alguns dos ícones também devem ser espelhados. Quando o texto, o layout e a iconografia são espelhados para oferecer suporte a IUs da direita para a esquerda, tudo o que estiver relacionado ao tempo deve ser representado como se movendo da direita para a esquerda. Por exemplo, avançar pontos para a esquerda, e retroceder pontos para a direita. No entanto, lembre-se de que o contexto em que o ícone é colocado também influencia se ele deve ou não ser espelhado.
Os ícones só devem ser espelhados se a direção deles corresponder a outros elementos da interface no modo RTL. Quando um ícone representa recursos visuais do seu site que são diferentes em RTL, ele também deve ser espelhado em RTL. Por exemplo, se os números de uma lista numerada estiverem no lado direito no idioma RTL, eles deverão ficar à direita do ícone espelhado.
Ícones RTL no Android
Este artigo para desenvolvedores Android descreve em detalhes como implementar interfaces do usuário RTL. Por padrão, no Android, os ícones não são espelhados quando a direção do layout é espelhada. É preciso espelhar especificamente os ícones adequados quando necessário, fornecendo recursos especializados para idiomas RTL ou usando a funcionalidade de framework para espelhar os recursos.
Para fornecer recursos especializados para idiomas RTL, use o qualificador ldrtl em diretórios de recursos, como res/drawable-ldrtl/. Os recursos dentro desses diretórios serão usados apenas para idiomas RTL. Para dispositivos com a API Android 19 ou versões mais recentes, o framework também fornece o atributo autoMirrored para drawables. Quando o atributo é definido como verdadeiro, o drawable é espelhado automaticamente em idiomas RTL.
Como usar o autoMirrored:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"
android:tint="?attr/colorControlNormal"
android:autoMirrored="true">
<path
android:fillColor="@android:color/white"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
Se o uso de autoMirrored ou o fornecimento de recursos Drawable alternativos não forem permitidos, o atributo scaleX da ImageView também vai poder ser usado para espelhar drawables, por exemplo, fornecendo um layout específico de RTL em um diretório res/layout-ldrtl.
Espelhamento no arquivo de layout:
<ImageView
android:id="@+id/my_icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:scaleX="-1" />
Por fim, drawables podem ser espelhados de forma programática.
Verifique manualmente a direção do layout usando getLayoutDirection:
if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
// custom code
}
Como espelhar o conteúdo do ImageView de maneira programática:
imageView.setScaleX(-1);
Ícones RTL no iOS
O iOS tem o conceito de um UISemanticContentAttribute que é anexado a cada visualização. Pode ser unspecified, forceLeftToRight, forceRightToLeft, playback ou spatial. O iOS usa esse valor e a configuração (LTR)/RTL (da esquerda para a direita) do dispositivo que apresenta a interface para determinar o effectiveLayoutDirection da visualização. EsseeffectiveLayoutDirection determina se uma imagem será ou não espelhada quando ela for exibida.
Por padrão, o conteúdo semântico das imagens é definido como unspecified. Isso faz com que eles sejam espelhados no modo RTL. Se você não quiser que um ícone seja espelhado, será necessário defini-lo explicitamente como forceLeftToRight. A Apple destaca algumas exceções que não devem ser espelhadas, como a reprodução de mídia (avançar, voltar etc.), notas musicais, imagens que indicam a passagem do tempo etc.
Exemplo de Objective-C:
// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
UISemanticContentAttributeForceLeftToRight;
Exemplo do Swift:
// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;
Para consultar uma documentação mais detalhada sobre como implementar RTL no iOS e macOS, consulte a documentação do RTL da Apple (em inglês).
O conteúdo semântico foi adicionado no iOS 9. Se você tiver suporte a versões anteriores do iOS, o framework de internacionalização do Material Design (link em inglês) faz o backport de algumas funcionalidades para o iOS 8.
Ícones RTL na Web
Recomendamos o seguinte artigo como introdução à RTL na Web: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2
Por padrão, na Web, os ícones não são espelhados quando a direção do layout é espelhada. É necessário espelhar especificamente os ícones adequados quando necessário.
O exemplo abaixo mostra como implementar uma regra CSS RTL simples. Também é possível visualizar no Codepen.
page.html
<html dir="rtl">
<img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>
page.css
html[dir="rtl"] .icon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Gerar seus próprios ícones RTL usando o ImageMagick
Se o espelhamento dos ícones no código não for uma opção, use o ImageMagick para espelhar horizontalmente a imagem.
convert -flop my_icon.png my_icon_rtl.png
Quais ícones devem ser espelhados para RTL?
Veja uma lista de ícones que podem ser espelhados programaticamente para RTL:
| seta para voltar | , seta para voltar no iOS | seta para frente |
| seta para frente no iOS | seta para a esquerda | seta para a direita |
| atividade | Devolução da atividade | Backspace para |
| Bateria desconhecida do | chamada feita | Mesclagem de chamadas de |
| ligação perdida | ligação perdida | ligação recebida |
| Divisão de chamada de | chevron para a esquerda | Botão para a direita |
| Modo leitor do Chrome | dispositivo desconhecido | DVR de |
| nota do evento | lista de reprodução em destaque | vídeo em destaque |
| primeira página | Voo pouso da | Decolagem do voo |
| Redução do recuo no formato | Aumento do recuo no formato | Lista de formatos com marcadores |
| para frente | Funções | Entrada de |
| guia do teclado | rótulo | marcador importante |
| Contorno do marcador | última página | Lançamento do |
| lista | Ajuda em tempo real do | compartilhamento de tela para dispositivo móvel |
| Gráfico multilinhas de | trajeto antes de | (avançar) |
| na próxima semana | nota | Abrir em uma nova |
| playlist adicionada | Músicas na fila de | Refazer |
| resposta | responder a todos | compartilhamento de tela |
| enviar | texto curto | : mostrar gráfico |
| Classificação | meia estrela | assunto |
| estável em alta | toc | em alta |
| em alta | Desfazer | lista de visualização |
| Ver colcha de | Ajustar texto |