Comment utiliser dans le matériau angular?

Je me demandais comment utiliser les icons de Material, car cela ne fonctionne pas:

  

Je suppose qu’il y a un problème avec le chemin donné en paramètre à l’atsortingbut icon. J’aimerais savoir où se trouve ce dossier d’icons?

Comme les autres réponses ne répondaient pas à mes préoccupations, j’ai décidé d’écrire ma propre réponse.

Le chemin indiqué dans l’atsortingbut icon de la directive md-icon est l’URL d’un fichier .png ou .svg situé quelque part dans votre répertoire de fichiers statiques. Vous devez donc placer le bon chemin de ce fichier dans l’atsortingbut icon. ps place le fichier dans le bon répertoire pour que votre serveur puisse le servir.

Rappelez md-icon vous que md-icon n’est pas comme les icons de bootstrap. Actuellement, ils ne sont qu’une directive qui montre un fichier .svg.

Mettre à jour

La conception angular du matériau a beaucoup évolué depuis la publication de cette question.

Maintenant, il y a plusieurs façons d’utiliser md-icon

La première consiste à utiliser des icons SVG.

Exemple:

ou

: où getMyIcon est une méthode définie dans $scope .

ou

pour l’utiliser, vous devez $mdIconProvider service $mdIconProvider pour configurer votre application avec les icons svg.

 angular.module('appSvgIconSets', ['ngMaterial']) .controller('DemoCtrl', function($scope) {}) .config(function($mdIconProvider) { $mdIconProvider .iconSet('social', 'img/icons/sets/social-icons.svg', 24) .defaultIconSet('img/icons/sets/core-icons.svg', 24); }); 

La seconde méthode consiste à utiliser des icons de police.

avant de faire cela, vous devez charger la bibliothèque de fonts comme ceci ..

ou utiliser des icons de police avec des ligatures

face

#xE87C;

face

Pour plus de détails, consultez notre

Documentation angular sur la directive mdIcon

$ mdIcon Service Documentation

$ mdIconProvider Documentation du service

Le moyen le plus simple aujourd’hui serait de demander simplement la police Material Icons à Google Fonts, par exemple dans votre balise d’en-tête HTML:

  

ou dans votre feuille de style:

 @import url(https://fonts.googleapis.com/icon?family=Material+Icons); 

puis utilisez comme icône de police avec des ligatures comme expliqué dans la directive md-icon . Par exemple:

 menu 

La liste complète des icons / ligatures se trouve sur https://www.google.com/design/icons/

Cela fonctionne réellement maintenant de bower.

 bower install material-design-icons --save 

Il télécharge 37,1 Ko. Ensuite, il extrait et installe. Vous verrez un dossier appelé material-design-icons dans le dossier bower_components. La taille totale est d’environ 299 Ko

md-icons n’est pas encore dans la version de matériel angular. J’ai utilisé les icons de Polymer , elles seront probablement les mêmes de toute façon.

 bower install polymer/core-icons 

Moyen facile: utilisez le CDN suivant:

  

Injectez ngMdIcons dans votre application angularjs:

 angular.module('demoapp', ['ngMdIcons']); 

Utilisez la directive ng-md-icon dans votre fichier HTML, en spécifiant une couleur de remplissage via css:

  

Source: https://klarsys.github.io/angular-material-icons/

Dans leur dernière version, il y a une directive appelée md-icon

  

Tous les préfixes md- sont maintenant des préfixes md- au moment de l’écriture de ceci!

Mettez ceci dans votre tête HTML:

  

Importer dans notre module:

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

Utilisez dans votre code:

 face 

Voici la dernière documentation:

https://material.angular.io/components/icon/overview

En utilisant comme
utiliser css et police même emplacement

 @font-face { font-family: 'Material-Design-Icons'; src: url('Material-Design-Icons.eot'); src: url('Material-Design-Icons.eot?#iefix') format('embedded-opentype'), url('Material-Design-Icons.woff2') format('woff2'), url('Material-Design-Icons.woff') format('woff'), url('Material-Design-Icons.ttf') format('truetype'), url('Material-Design-Icons.svg#ge_dinar_oneregular') format('svg'); font-weight: normal; font-style: normal; }