Liste de toutes les icônes de tapis en Angular

1. Material Design Icons DX en Angular
2. Icônes Angular Material fournies par Google

Nous présenterons des sites Web où nous pourrons trouver toutes les icônes de tapis dans Angular et des méthodes pour utiliser ces icônes de tapis dans des projets Angular.

Material Design Icons DX en Angular

Icônes de conception matérielle DX est un ~fork des icônes de conception matérielle de Google où vous pouvez trouver plus de 900 icônes matérielles. Ce projet a été créé pour résoudre les problèmes d’expérience de développement.

Il existe deux façons d’installer des icônes de conception de matériaux dans votre projet.

Pour installer en utilisant npm :

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

Pour inclure ​​ou @importer le fichier CSS précompilé :

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

Usage

En utilisant scss, vous pouvez importer des polices et des variables dans votre projet.

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

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

Personnalisation des classes

Nous pouvons personnaliser nos classes et accéder aux variables matérielles avec les Sass mixins.

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

Une liste d’icônes peut être trouvée ici.

Icônes Angular Material fournies par Google

Les icônes du système de conception de matériaux de Google sont faciles à utiliser pour n’importe quel projet, et il existe plus de 900 icônes de matériaux. Le sélecteur <mat-icon> affiche les icônes de matériaux en Angular. <mat-icon> fait partie d’un module de matériau Angular appelé MatIconModule.

Nous pouvons utiliser la ligature de police comme icône en mettant le texte de la ligature dans le composant <mat-icon>.

Exemple:

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

Nous devons importer MatIconModule à partir des modules de matériaux Angular.

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

Une liste d’icônes peut être trouvée ici.