Lista de Todos os Ícones Mat em Angular

1. Ícones do Material Design DX em Angular
2. Ícones de materiais Angular fornecidos pelo Google

Apresentaremos sites onde podemos encontrar todos os ícones de tapete no Angular e métodos para usar esses ícones de tapete em projetos Angular.

Ícones do Material Design DX em Angular

Ícones de design de material DX é uma ramificação dos ícones de design de material do Google, onde você pode encontrar mais de 900 ícones de material. Este projeto foi criado para corrigir problemas de experiência de desenvolvimento.

Existem duas maneiras de instalar ícones de design de material em seu projeto.

Para instalar usando npm:

npm install material-design-icons-iconfont --save

Para include ou @import o arquivo CSS pré-compilado:

<link href=".../material-design-icons.css" rel="stylesheet">

Utilização

Usando scss, você pode importar fontes e variáveis ​​em seu projeto.

$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';

@import '~material-design-icons-iconfont/src/material-design-icons';

Customizando Classes

Podemos personalizar nossas classes e acessar variáveis ​​de materiais com Sass mixins.

.my-home {
  @include material-icon('home');
}
# or
.my-home:before {
  content: material-icons-content('home');
}

Uma lista de ícones pode ser encontrada aqui.

Ícones de materiais Angular fornecidos pelo Google

Os ícones do sistema de design de materiais do Google são fáceis de usar para qualquer projeto e existem mais de 900 ícones de materiais. O seletor <mat-icon> exibe ícones de materiais em Angular. <mat-icon> é uma parte de um módulo de material Angular denominado MatIconModule.

Podemos usar a ligadura de fonte como um ícone, colocando o texto da ligadura no componente <mat-icon>.

Exemplo:

<mat-icon>home</mat-icon>

Temos que importar MatIconModule dos módulos de material Angular.

import {MatIconModule} from '@angular/material/icon'

Uma lista de ícones pode ser encontrada aqui.