Comment utiliser <md-icon> dans un matériau angulaire?

Je me demandais comment utiliser les icônes de Material, car cela ne fonctionne pas:

<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon> 

Je suppose qu'il y a un problème avec le chemin donné en paramètre à l'attribut icon. Je voudrais savoir où se trouve réellement ce dossier d'icônes?

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

Le chemin donné dans l'attribut icon de la md-icondirective est l'URL d'un fichier .png ou .svg se trouvant quelque part dans votre répertoire de fichiers statiques. Vous devez donc mettre le bon chemin de ce fichier dans l'attribut icon. ps place le fichier dans le bon répertoire afin que votre serveur puisse le servir.

N'oubliez md-iconpas que ce n'est pas comme les icônes de bootstrap. Actuellement, il ne s'agit que d'une directive qui affiche un fichier .svg.

Mettre à jour

La conception des matériaux angulaires a beaucoup changé depuis que cette question a été publiée.

Il existe maintenant plusieurs façons d'utiliser md-icon

La première consiste à utiliser des icônes SVG.

<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>

Exemple:

<md-icon md-svg-src = '/static/img/android.svg'></md-icon>

ou

<md-icon md-svg-src = '{{ getMyIcon() }}'></md-icon>

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

ou <md-icon md-svg-icon="social:android"></md-icon>

pour l'utiliser, vous devez au $mdIconProviderservice de configurer votre application avec des jeux d'icônes 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 deuxième façon consiste à utiliser des icônes de police.

<md-icon md-font-icon="android" alt="android"></md-icon>

<md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

ou utilisez des icônes de police avec des ligatures

<md-icon md-font-library="material-icons">face</md-icon>

<md-icon md-font-library="material-icons">#xE87C;</md-icon>

<md-icon md-font-library="material-icons" class="md-light md-48">face</md-icon>

Pour plus de détails, consultez notre

Documentation de la directive sur le matériau angulaire mdIcon

Documentation du service $ mdIcon

Documentation du service $ mdIconProvider

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

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:

<md-icon aria-label="Menu" class="material-icons">menu</md-icon>

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

Cela fonctionne actuellement à partir 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

Les md-icons ne sont pas encore dans la version bower de angular-material. J'utilise les icônes de Polymer , elles seront probablement les mêmes de toute façon.

bower install polymer/core-icons

Méthode simple: utilisez le CDN suivant:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script> 

Injectez ngMdIcons dans votre application angularjs:

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

Utilisez la directive ng-md-icon dans votre html, en spécifiant fill-color via css:

<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon> 

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

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

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>

Tous les md-préfixes sont maintenant des mat-préfixes au moment de la rédaction de ceci!

Mettez ceci dans votre tête html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Importez dans notre module:

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

Utilisez dans votre code:

<mat-icon>face</mat-icon>

Voici la dernière documentation:

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

<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
    <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>

source: https://material.angularjs.org/#/demo/material.components.button

En utilisant comme
utiliser le CSS et la police au 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;
}