material icons

ícones de materiais

Fontes de ícones e CSS mais recentes para ícones de design de material de auto-hospedagem.

Este pacote é atualizado automaticamente, portanto sempre terá os ícones mais recentes do Google.

Para símbolos de materiais, consulte material-symbols

Para SVGs, consulte @material-design-icons/svg

• Instalação
• Uso
• Ícones disponíveis

Instalação

Instale a versão mais recente usando:

npm install material-icons@latest

Nota: Se você estiver atualizando de 0.x para 1.x, consulte as notas de versão 1.0.0.

Uso

Importe em JS (exemplo: src/index.js em Create React App, src/main.js em Vue CLI):

 import 'material-icons/iconfont/material-icons.css' ;

ou importe em CSS (exemplo: src/styles.css em Angular CLI):

 @import 'material-icons/iconfont/material-icons.css' ;

ou importe em HTML:

 < link href =" /path/to/material-icons/iconfont/material-icons.css " rel =" stylesheet " >

Para exibir um ícone, use um dos seguintes:

 < span class =" material-icons " > pie_chart </ span >          <!-- Filled -->
< span class =" material-icons-outlined " > pie_chart </ span > <!-- Outlined -->
< span class =" material-icons-round " > pie_chart </ span >    <!-- Round -->
< span class =" material-icons-sharp " > pie_chart </ span >    <!-- Sharp -->
< span class =" material-icons-two-tone " > pie_chart </ span > <!-- Two Tone -->

Reduzindo o tamanho da construção

O material-icons.css padrão inclui CSS para todas as fontes. Isso pode fazer com que ferramentas de construção como o webpack copiem todas as fontes para o diretório de construção, mesmo se você não estiver usando todas elas. Para reduzir o tamanho da compilação, importe apenas os estilos necessários. Por exemplo, se você precisar apenas de ícones preenchidos e delineados, importe filled.css e outlined.css em vez do padrão material-icons.css :

 - import 'material-icons/iconfont/material-icons.css';
+ import 'material-icons/iconfont/filled.css';
+ import 'material-icons/iconfont/outlined.css';

Mostrar tudo

Ícones	CSS	Atrevido
Preenchido	preenchido.css	preenchido.scss
Delineado	delineado.css	delineado.scss
Redondo	redondo.css	round.scss
Afiado	afiado.css	afiado.scss
Dois tons	dois tons.css	dois tons.scss

Usando Sass

Importar em Sass (exemplo: src/styles.scss em Angular CLI):

 @import ' material-icons/iconfont/material-icons.scss ' ;

Variáveis ​​Sass disponíveis:

 $material-icons-font-path : ' ./ ' !default ;
$material-icons-font-size : 24 px !default ;
$material-icons-font-display : block !default ;

Se você estiver recebendo erros com webpack ou Vue CLI, adicione esta linha antes de importar:

 $material-icons-font-path : ' ~material-icons/iconfont/ ' ;

Usando mat-icon Angular

Para exibir um ícone, use um dos seguintes:

 < mat-icon > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-outlined " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-round " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-sharp " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-two-tone " > pie_chart </ mat-icon >

Usando classes CSS

Alternativamente, você pode usar classes CSS em vez de ligaduras para exibir ícones. Saber mais

Ícones disponíveis

Veja a demonstração.

Licença

Os ícones do material design são criados pelo Google.

Disponibilizamos esses ícones para você incorporar em seus produtos sob a licença Apache versão 2.0. Sinta-se à vontade para remixar e compartilhar novamente esses ícones e documentação em seus produtos. Adoraríamos atribuição na tela Sobre do seu aplicativo, mas ela não é obrigatória.