Le Material Design de Google a apporté un changement radical à ses services avec des couleurs magnifiquement contrastées et des animations interactives. Avec l'alternance, sont venues des icônes conçues pour correspondre au reste de l'écosystème. Google a rendu toutes les icônes disponibles gratuitement sur leurs sites Web, nous vous expliquons ici comment les télécharger et les utiliser.
Télécharger des icônes de conception de matériel gratuites
Pour télécharger les icônes sur le thème Material, rendez-vous sur le référentiel de Google. Faites défiler vers le bas et vous découvrirez des tonnes d'icônes disponibles à utiliser. Vous pouvez soit effectuer une recherche à l'aide de la barre d'outils, soit sélectionner celle dont vous avez besoin en faisant défiler, ce qui vous prendra évidemment beaucoup de temps. Une fois que vous avez fait cela, une barre horizontale apparaîtra en bas contenant le nom de l'icône et quelques options que vous pouvez ajuster.
Astuce: Si vous avez besoin de télécharger toutes les icônes matérielles, rendez-vous sur ce lien.
Vous pouvez spécifier la taille, si vous voulez une icône noire ou blanche et enfin, vous pouvez les télécharger au format SVG ou PNG. Malheureusement, il n'y a que deux variantes de couleurs disponibles. Cependant, vous pouvez utiliser SVG Editor pour personnaliser une icône SVG et en modifier les nuances.
Modifier la couleur des icônes conçues par le matériau à l'aide de l'éditeur SVG
Pour modifier la couleur de l'icône dans l'éditeur SVG, cliquez sur l'icône du seau en bas et sélectionnez la couleur souhaitée. Appuyez sur l'image de l'icône après l'avoir importée à partir de la liste déroulante d'édition SVG dans le coin supérieur gauche. Une fois cela fait, exportez-le à partir du même menu déroulant que nous avons vu précédemment. Si vous avez besoin de modifier des icônes localement, vous pouvez télécharger SVG via ce lien.
Google a publié un guide détaillé pour l'utilisation de ces icônes sur leur page Github. Il comprend également des détails sur les licences, des extraits de code iOS/Android pour commencer et quelques méthodes pour implémenter des icônes matérielles sur votre site Web avec des exemples.
C'était tout. Faites-nous savoir si nous avons manqué quelque chose dans la section des commentaires ci-dessous.