Comment utiliser des icônes personnalisées dans un matériau angulaire

Si vous souhaitez utiliser des icônes personnalisées dans Angular Material, vous devez suivre quelques étapes. Tout d'abord, vous devrez créer votre propre jeu d'icônes. Angular Material est livré avec un ensemble d'icônes intégré, mais vous pouvez également créer les vôtres. Une fois que vous avez vos icônes, vous devrez les enregistrer avec Angular Material. Cela peut être fait dans le fichier de module de votre application. Une fois vos icônes enregistrées, vous pouvez les utiliser comme les icônes intégrées. Vous pouvez les utiliser dans votre balisage ou vous pouvez y accéder par programmation. C'est tout ce qu'il y a à faire pour utiliser des icônes personnalisées dans Angular Material ! En suivant ces étapes, vous pouvez facilement ajouter vos propres icônes à Angular Material à utiliser dans vos applications.

Dans ce didacticiel, nous utiliserons le composant >mat-icon> pour créer la police Material Icons. Le composant sera utilisé en plus de prendre en charge une icône sva personnalisée. Sur GitHub, vous pouvez trouver le code de travail complet. Ce message est destiné à ceux qui n'apprennent qu'Angular v4.2+. Le matériau angulaire de ce didacticiel a été écrit à l'origine dans Angular 5.2 et Angular 10.1. L'icône que nous utiliserons dans ce didacticiel (qui ressemble à un visage avec un sourire) est l'icône d'humeur. En plus d'une liste complète d'icônes Material, le site Web Material Design propose une variété de styles d'icônes pouvant être utilisés seuls.

Nous pouvons maintenant utiliser l'icône de la souris pour afficher les SVG. En saisissant une étiquette dans la propriété d'entrée d'un fichier.html, vous pouvez utiliser l' étiquette de l'icône pour spécifier l'icône à laquelle accéder. L'URL doit être https://app.html. Jetons un coup d'œil à ce qui est actuellement disponible. Lorsque vous regardez l'application dans votre navigateur, vous remarquerez que l'icône personnalisée est stylisée dans Material. Déplacer le MatIconRegistry dans une classe de service l'aidera à maintenir et à nettoyer le code.

Comment utiliser les icônes Svg dans Angular 12 ?

Pour utiliser les icônes SVG dans Angular 12, vous devrez installer les packages @angular/material et @angular/material-extensions. Vous pouvez ensuite utiliser le service matIconRegistry pour enregistrer les icônes et les ajouter à vos composants.

Vous pouvez gérer le code dans Angular2 en utilisant votre fichier Icon.svg comme votre séparé. De plus, le module ng-inline-svg (ou, si possible, d'autres approches similaires) peut être utilisé pour ce faire. En conséquence, c'est essentiellement quelque chose au milieu - vous aurez des fichiers séparés pour chaque type d'image, les images étant en ligne lorsque la page se charge afin que vous puissiez les manipuler à l'aide de JS/CSS.

L'utilisation d'aria-dedicateby dans le cadre de votre SVG permettra aux utilisateurs handicapés d'avoir une meilleure expérience lors de l'utilisation de votre site Web. Par conséquent, lorsque vous décrivez vos icônes avec aria-dedicated by, vous serez en mesure de vous assurer que les utilisateurs handicapés peuvent comprendre ce qu'elles représentent.

Le débat de Png Vs. Icônes SVG

D'autre part, un canal alpha peut également être ajouté à un fichier SVG. En d'autres termes, parce qu'elles peuvent être incluses dans des zones transparentes tout en conservant un peu de couleur, les icônes SVG sont plus polyvalentes que les icônes PNG . Le choix du fichier à utiliser pour vos icônes dépend de votre projet spécifique et de ses besoins.

Comment utiliser les icônes Svg personnalisées en HTML ?

Pour utiliser des icônes SVG personnalisées en HTML, vous devez inclure le chemin d'accès au fichier de l'icône dans l'attribut href de l'élément de l'icône. Le chemin du fichier doit être relatif au répertoire racine de la page. Par exemple, si l'icône se trouve dans un dossier appelé "icons" dans le répertoire racine, le chemin du fichier serait "icons/icon.svg".

Depuis l'introduction d'outils en ligne tels que Icomoon et Fontello, les polices Web sont devenues beaucoup plus faciles à créer. Avec HTML5, nous avons accès à une gamme d'icônes beaucoup plus large, grâce aux graphiques vectoriels évolutifs. Si vous souhaitez fournir un support technique à Explorer 8, il existe quelques options de secours simples. L'identifiant d'un fragment est une propriété SVG intégrée. Nous pouvons référencer un fragment si nous voulons utiliser une spécification de vue SVG ou adresser un tableau. Cet élément est un élément SVG basé sur son ID >view>. Pour afficher uniquement le cheval noir de ce sprite de pièce d'échecs (de Wikipedia Commons), vous devez détecter les valeurs comme vous le feriez dans le schéma ci-dessous.

En utilisant la balise img pour définir l'image, la technique fonctionne bien avec Firefox, Chrome, Safari (bureau) et Opera. Alternativement, vous pouvez utiliser un fichier SVG externe pour créer des sprites CSS, comme indiqué dans l'image ci-dessous. Il s'agit d'une technique de fabrication fiable et prête à l'emploi. Je l'ai testé dans une variété de navigateurs majeurs (y compris IE8) et cela a parfaitement fonctionné. Des icônes apparaissent à l'écran sous forme de balise. Encore une fois, Icomoon peut être utilisé pour créer manuellement la collection de balises de symboles, ou vous pouvez utiliser un plugin Grunt (google for Grunt SVG merge) pour le faire. À l'exception d'IE9, cette méthode peut être utilisée avec tous les principaux navigateurs. Même la solution de Jonathan Neal, SVG4everybody, peut être utilisée pour résoudre ce problème.

À moins que le code source ne spécifie l'attribut de largeur souhaité, une image sva ne s'affiche pas dans le navigateur Chrome. Si le SVG n'a pas cet attribut, le navigateur agrandira ou réduira l'image.

Comment utiliser des images SVG sur votre page Web

Vous pouvez insérer des images SVG directement dans HTML en utilisant la balise svg> /svg>. L'image SVG est accessible dans le code VS ou dans votre IDE préféré en copiant le code et en le collant dans l'élément body de votre document HTML. Si tout se passait bien, votre page Web ressemblerait exactement à celle illustrée ici.
Les icônes peuvent être créées avec des images SVG en tapant simplement leur nom dans un navigateur Web. HTML peut y être intégré et des versions mises en cache peuvent être installées. Les preuves sont également prometteuses pour l'avenir. Les icônes doivent être créées avec des PNG ou des interfaces graphiques évolutives (SVG).

Liste d'icônes Svg de matériau angulaire

La bibliothèque Angular Material fournit un ensemble de composants d'interface utilisateur réutilisables, bien testés et accessibles, basés sur la spécification Material Design de Google. L'une des fonctionnalités de la bibliothèque est la possibilité d'utiliser des icônes SVG comme icônes de matériau. Le jeu d'icônes Angular Material comprend une grande variété d'icônes, notamment des icônes de médias sociaux, des icônes de type de fichier et des flèches. Vous pouvez parcourir la liste complète des icônes Angular Material sur le site des icônes Material.

Les icônes peuvent être affichées à l'aide du composant Mat-Icon de Angular Material. La principale caractéristique de ce composant est la possibilité d'afficher des images à l'aide de polices Web telles que Font-awesome, qui nécessite simplement le nom de l'image dont vous avez besoin. Qu'advient-il des icônes qui n'appartiennent pas aux polices Web ? Dans l'icône, souhaitez-vous apporter des modifications (par exemple, la couleur au survol ou l'état du bouton à un emplacement spécifique) lors de l'exécution ? L'erreur suivante apparaît après avoir ouvert la section de la console des navigateurs. Lors de l'utilisation du contexte d'URL de ressource, la valeur unsafe est utilisée. Définir l'URL en paramètre permet de contournerSecurityTrustResourceUrl, qui empêche un attaquant d'injecter une URL malveillante telle que celle-ci, voir la documentation officielle de DomSanitizer.

Nous verrons une meilleure méthode plus tard, mais pour l'instant, nous allons simplement les mettre sur la page app.html. Ajoutez une classe dans la balise HTML mat-icon comme décrit ci-dessus. Lorsqu'un utilisateur survole l'icône, la couleur de l'image change en raison du SCSS. Les icônes devraient maintenant changer de couleur lorsque vous les survolez. Dans le cadre d'un prochain article, nous chercherons à améliorer cela et à refactoriser pour permettre le chargement des icônes à l'aide d'un service.

Comment utiliser les icônes de matériau angulaire

Où puis-je trouver des icônes de matériaux angulaires ?
La seule chose que vous devez faire est d'utiliser les polices Web Google suivantes dans votre code HTML. Les icônes de matériau peuvent être trouvées dans un seul fichier (42 Ko) et leur taille varie de grande à petite. Les icônes sont divisées en dix catégories différentes que vous pouvez voir dans le référentiel Git. Les icônes peuvent également être hébergées sur votre propre serveur.
Quels sont quelques-uns des bons sites pour voir des icônes matérielles ?
Nous avons compilé les icônes Material dans un référentiel Git, qui comprend tous les formats dans lesquels nous mettons à disposition.
Quelle est la meilleure façon de personnaliser mon icône ?
L'élément class doit être ajouté à la balise HTML mat-icon, comme indiqué ci-dessus. L'ajout du SCSS à la classe modifie la couleur de l'icône chaque fois qu'un utilisateur la survole. Lorsque vous survolez les icônes, elles devraient maintenant changer de couleur.

Comment utiliser les icônes de matériau angulaire

Les icônes Angular Material sont des SVG qui peuvent être utilisés dans votre application Angular. Pour utiliser une icône, ajoutez simplement la classe icon à un élément. Par exemple, pour utiliser l'icône de cercle de compte, vous devez ajouter la classe mat-icon-account-circle à un élément.

Nous avons des bibliothèques de matériaux angulaires qui peuvent être utilisées pour concevoir rapidement notre application et lui attribuer les balises in build. La bibliothèque de matériaux contient un mat-icon, qui est nécessaire pour nous afficher les icônes. Dans les sections suivantes, nous apprendrons comment installer les bibliothèques requises et comment les implémenter pour afficher des icônes dans notre application. Notre premier service est MatIconRegistry, qui est un registre qui nous permet d'identifier et de définir des alias pour les icônes à l'aide d'un service injectable. L'icône est très simple à utiliser, mais elle nécessite que cette directive soit importée dans le projet ou le module racine où nous avons l'intention de l'afficher. Lancez la commande mentionnée ci-dessus sur votre invite de commande pour créer un nouveau projet angulaire. Veuillez essayer l'une des commandes répertoriées ci-dessous pour vous assurer que toutes les bibliothèques nécessaires sont installées dans notre projet. Cela est particulièrement vrai pour les développeurs, qui peuvent utiliser la bibliothèque et le module directement dans notre application sans avoir à gérer les étapes d'ajout de la bibliothèque et du module au module racine.

Mat-icône Svg

Un svg mat-icon est un simple graphique vectoriel qui peut être utilisé pour représenter une icône ou un logo. Le graphique peut être redimensionné sans perte de qualité et peut être facilement modifié ou modifié.

En utilisant le composant mat-ion des matériaux angulaires, nous pouvons générer des SVG locaux. Nous injectons le service MatIconRegistry ainsi que le DomSanitizer dans le constructeur. La fonction registerIcons() inclut les paramètres load et URL, ainsi qu'une fonction privée appelée load. Si nous utilisons cette variante, nous n'aurons qu'à ajouter le nom du fichier image. Si vous utilisez une chaîne, la fonction de chargement icon.service est légèrement différente. Le nom de l'image sera généré en utilisant l'index comme clé pour le nom de l'image dans la fonction de chargement. Ce service doit maintenant être activé lorsque l'application commence à se charger. Il est beaucoup plus facile de lire et de maintenir le code car il est beaucoup plus lisible. Nous avons divisé les images en sections distinctes et un service plus simple a été mis en place.