Come usare <md-icon> in Angular Material?

Mi stavo chiedendo come usare le icone di Material, dato che non funziona:

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

Immagino che ci sia un problema con il percorso dato come parametro all'attributo icon. Vorrei sapere dove si trova effettivamente questa cartella di icone?

Poiché le altre risposte non rispondevano alla mia preoccupazione, ho deciso di scrivere la mia risposta.

Il percorso fornito nell'attributo icon di md-icon direttiva è l'URL di un file .png o .svg che si trova da qualche parte nella directory del file statico. Quindi devi mettere il percorso corretto di quel file nell'attributo icon. ps metti il ​​file nella directory giusta in modo che il tuo server possa servirlo.

Ricorda che md-iconnon è come le icone di bootstrap. Attualmente sono semplicemente una direttiva che mostra un file .svg.

Aggiornare

Il design del materiale angolare è cambiato molto da quando è stata pubblicata questa domanda.

Ora ci sono diversi modi per usare md-icon

Il primo modo è usare le icone SVG.

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

Esempio:

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

o

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

: dove getMyIconè un metodo definito in $scope.

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

per utilizzare questo è necessario che il $mdIconProviderservizio configuri la tua applicazione con i set di icone 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);    
  });

Il secondo modo è usare le icone dei caratteri.

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

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

prima di fare questo devi caricare la libreria dei caratteri in questo modo ..

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

o usa le icone dei caratteri con le legature

<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>

Per ulteriori dettagli consultare il nostro

Documentazione della direttiva mdIcon di Angular Material

Documentazione del servizio $ mdIcon

$ mdIconProvider Documentazione del servizio

Il modo più semplice oggi sarebbe semplicemente richiedere il carattere delle icone dei materiali da Google Fonts, ad esempio nel tag dell'intestazione HTML:

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

o nel tuo foglio di stile:

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

e quindi utilizzare come icona del carattere con le legature come spiegato nella direttiva md-icon . Per esempio:

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

L'elenco completo di icone / legature è su https://www.google.com/design/icons/

In realtà ora funziona da pergola.

bower install material-design-icons --save

Scarica 37,1 KB. Quindi estrae e installa. Vedrai una cartella chiamata material-design-icons nella cartella bower_components. La dimensione totale è di circa 299 KB

Le icone md non sono ancora nella versione pergolato del materiale angolare. Sto usando le icone di Polymer , probabilmente saranno uguali comunque.

bower install polymer/core-icons

Modo semplice: usa il seguente CDN:

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

Iniettare ngMdIcons nella tua applicazione angularjs:

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

Usa la direttiva ng-md-icon nel tuo html, specificando il colore di riempimento tramite css:

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

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

Nella loro ultima versione c'è una direttiva chiamata md-icon

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

Tutti i md-prefissi sono ora mat-prefissi al momento in cui scrivo questo!

Metti questo nella tua testa html:

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

Importa nel nostro modulo:

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

Usa nel tuo codice:

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

Ecco l'ultima documentazione:

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>

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

Utilizzando come
utilizzare CSS e font nella stessa posizione

@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;
}