Jak używać <md-icon> w Angular Material?

Zastanawiałem się, jak używać ikon Material, ponieważ to nie działa:

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

Wydaje mi się, że wystąpił problem ze ścieżką podaną jako parametr do atrybutu ikony. Chciałbym wiedzieć, gdzie właściwie jest ten folder ikon?

Ponieważ inne odpowiedzi nie dotyczyły mojego problemu, zdecydowałem się napisać własną odpowiedź.

Ścieżka podana w atrybucie icon md-icondyrektywy jest adresem URL pliku .png lub .svg, który znajduje się gdzieś w katalogu plików statycznych. Musisz więc umieścić właściwą ścieżkę do tego pliku w atrybucie ikony. ps umieść plik w odpowiednim katalogu, aby serwer mógł go obsłużyć.

Pamiętaj, md-iconto nie jest jak ikony bootstrap. Obecnie są to tylko dyrektywy, które pokazują plik .svg.

Aktualizacja

Projektowanie materiałów kątowych bardzo się zmieniło od czasu opublikowania tego pytania.

Teraz jest kilka sposobów użycia md-icon

Pierwszym sposobem jest użycie ikon SVG.

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

Przykład:

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

lub

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

: gdzie getMyIconjest metodą zdefiniowaną w $scope.

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

Aby z tego skorzystać, musisz $mdIconProviderskonfigurować aplikację za pomocą zestawów ikon 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);    
  });

Drugim sposobem jest użycie ikon czcionek.

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

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

zanim to zrobisz, musisz załadować bibliotekę czcionek w ten sposób.

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

lub użyj ikon czcionek z ligaturami

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

Więcej informacji znajdziesz w naszym

Dokumentacja dyrektywy mdIcon dotyczącej materiałów kątowych

Dokumentacja serwisowa $ mdIcon

Dokumentacja usługi $ mdIconProvider

Najprostszym dzisiejszym sposobem byłoby po prostu zażądanie czcionki Material Icons z Google Fonts, na przykład w tagu nagłówka HTML:

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

lub w swoim arkuszu stylów:

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

a następnie użyj jako ikony czcionki z ligaturami, jak wyjaśniono w dyrektywie md-icon . Na przykład:

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

Pełna lista ikon / ligatur znajduje się pod adresem https://www.google.com/design/icons/

To faktycznie działa teraz z altany.

bower install material-design-icons --save

Pobiera 37,1 KB. Następnie rozpakowuje i instaluje. Zobaczysz folder o nazwie Material-design-icons w folderze bower_components. Całkowity rozmiar to około 299 KB

Ikony md nie są jeszcze dostępne w wydaniu angular-material. Używam ikony polimer jest , oni prawdopodobnie być taka sama w każdym razie.

bower install polymer/core-icons

Prosty sposób: użyj następującego CDN:

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

Wstrzyknij ngMdIcons do swojej aplikacji angularjs:

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

Użyj dyrektywy ng-md-icon w swoim html, określając kolor wypełnienia przez css:

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

Źródło: https://klarsys.github.io/angular-material-icons/

W ich najnowszym wydaniu jest dyrektywa o nazwie md-icon

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

Wszystkie md-przedrostki są teraz mat-przedrostkami w momencie pisania tego!

Umieść to w swojej głowie html:

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

Import w naszym module:

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

Użyj w swoim kodzie:

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

Oto najnowsza dokumentacja:

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>

źródło: https://material.angularjs.org/#/demo/material.components.button

Używając like,
użyj CSS i czcionki w tej samej lokalizacji

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