¿Cómo usar <md-icon> en Angular Material?

Me preguntaba cómo usar los íconos de Material, ya que esto no funciona:

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

Supongo que hay un problema con la ruta dada como parámetro al atributo del icono. Me gustaría saber dónde está realmente esta carpeta de iconos.

Como las otras respuestas no abordaron mi preocupación, decidí escribir mi propia respuesta.

La ruta dada en el atributo de icono de la md-icondirectiva es la URL de un archivo .png o .svg que se encuentra en algún lugar de su directorio de archivos estáticos. Por lo tanto, debe poner la ruta correcta de ese archivo en el atributo de icono. ps coloque el archivo en el directorio correcto para que su servidor pueda servirlo.

Recuerde md-iconque no es como los iconos de arranque. Actualmente son simplemente una directiva que muestra un archivo .svg.

Actualizar

El diseño de material angular ha cambiado mucho desde que se publicó esta pregunta.

Ahora hay varias formas de usar md-icon

La primera forma es utilizar iconos SVG.

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

Ejemplo:

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

o

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

: donde getMyIcones un método definido en $scope.

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

para usar esto, tiene $mdIconProviderque configurar el servicio para configurar su aplicación con conjuntos de iconos 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 segunda forma es utilizar iconos de fuentes.

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

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

antes de hacer esto, debe cargar la biblioteca de fuentes de esta manera ...

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

o use iconos de fuentes con ligaduras

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

Para más detalles consulte nuestro

Documentación de la directiva mdIcon de material angular

Documentación del servicio $ mdIcon

Documentación del servicio $ mdIconProvider

La forma más sencilla hoy en día sería simplemente solicitar la fuente Material Icons de Google Fonts, por ejemplo, en su etiqueta de encabezado HTML:

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

o en tu hoja de estilo:

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

y luego utilícelo como icono de fuente con ligaduras como se explica en la directiva md-icon . Por ejemplo:

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

La lista completa de iconos / ligaduras se encuentra en https://www.google.com/design/icons/

De hecho, ahora funciona desde Bower.

bower install material-design-icons --save

Descarga 37,1 KB. Luego extrae e instala. Verá una carpeta llamada material-design-icons en la carpeta bower_components. El tamaño total es de alrededor de 299 KB.

md-icons aún no están en la versión de bower de material angular. He estado usando los íconos de Polymer , probablemente serán los mismos de todos modos.

bower install polymer/core-icons

Manera fácil: use el siguiente CDN:

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

Inyecte ngMdIcons a su aplicación angularjs:

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

Use la directiva ng-md-icon en su html, especificando el color de relleno a través de css:

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

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

En su último lanzamiento hay una directiva llamada md-icon

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

¡Todos los md-prefijos son ahora mat-prefijos al momento de escribir esto!

Pon esto en tu cabeza html:

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

Importar en nuestro módulo:

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

Use en su código:

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

Aquí está la documentación más reciente:

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>

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

Al usar like,
use css y fuente en la misma ubicación

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