Como usar <md-icon> em Material Angular?

Eu queria saber como usar os ícones do Material, pois isso não está funcionando:

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

Acho que há um problema com o caminho fornecido como parâmetro para o atributo do ícone. Gostaria de saber onde esta pasta de ícones realmente está?

Como as outras respostas não abordavam minha preocupação, decidi escrever minha própria resposta.

O caminho fornecido no atributo icon da md-icondiretiva é a URL de um arquivo .png ou .svg localizado em algum lugar do diretório de arquivos estáticos. Portanto, você deve colocar o caminho correto desse arquivo no atributo icon. ps coloque o arquivo no diretório correto para que seu servidor possa servi-lo.

Lembre- md-iconse não é como ícones de bootstrap. Atualmente, eles são apenas uma diretiva que mostra um arquivo .svg.

Atualizar

O design de material angular mudou muito desde que esta pergunta foi postada.

Agora, existem várias maneiras de usar md-icon

A primeira maneira é usar ícones SVG.

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

Exemplo:

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

ou

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

: onde getMyIconé um método definido em $scope.

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

para usar isso, você precisa do $mdIconProviderserviço para configurar seu aplicativo com conjuntos de ícones 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);    
  });

A segunda maneira é usar ícones de fonte.

<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 fazer isso, você deve carregar a biblioteca de fontes assim.

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

ou use ícones de fonte com 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 mais detalhes consulte nosso

Documentação da diretiva de mdIcon de material angular

Documentação de serviço $ mdIcon

$ mdIconProvider Service Documentation

A maneira mais simples hoje seria simplesmente solicitar a fonte Material Icons do Google Fonts, por exemplo, em sua tag de cabeçalho HTML:

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

ou em sua folha de estilo:

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

e então use como ícone de fonte com ligaduras conforme explicado na diretiva md-icon . Por exemplo:

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

A lista completa de ícones / ligaduras está em https://www.google.com/design/icons/

Na verdade, agora funciona do caramanchão.

bower install material-design-icons --save

Ele baixa 37,1 KBs. Em seguida, ele extrai e instala. Você verá uma pasta chamada material-design-icons na pasta bower_components. O tamanho total é de cerca de 299 KB

md-icons ainda não estão na versão bower do angular-material. Tenho usado os ícones do Polymer , eles provavelmente serão os mesmos de qualquer maneira.

bower install polymer/core-icons

Maneira fácil: use o seguinte CDN:

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

Injete ngMdIcons em seu aplicativo angularjs:

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

Use a diretiva ng-md-icon em seu html, especificando a cor de preenchimento por meio de css:

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

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

Em sua versão mais recente, há uma diretiva chamada md-icon

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

Todos os md-prefixos agora são mat-prefixos no momento em que escrevo isto!

Coloque isso na sua cabeça html:

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

Importar em nosso módulo:

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

Use em seu código:

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

Aqui está a documentação mais recente:

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

Usando como
usar css e fonte no mesmo local

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