Wie verwende ich <md-icon> in Angular Material?

Ich habe mich gefragt, wie ich die Symbole von Material verwenden soll, da dies nicht funktioniert:

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

Ich denke, es gibt ein Problem mit dem Pfad, der als Parameter für das Attribut icon angegeben wird. Ich möchte wissen, wo sich dieser Symbolordner tatsächlich befindet.

Da die anderen Antworten mein Anliegen nicht angesprochen haben, habe ich beschlossen, meine eigene Antwort zu schreiben.

Der im md-iconSymbolattribut der Direktive angegebene Pfad ist die URL einer PNG- oder SVG-Datei, die sich irgendwo in Ihrem statischen Dateiverzeichnis befindet. Sie müssen also den richtigen Pfad dieser Datei in das Symbolattribut einfügen. ps legt die Datei im richtigen Verzeichnis ab, damit Ihr Server sie bereitstellen kann.

Denken Sie daran, md-iconist nicht wie Bootstrap-Symbole. Derzeit handelt es sich lediglich um eine Direktive, die eine SVG-Datei anzeigt.

Aktualisieren

Das eckige Materialdesign hat sich stark verändert, seit diese Frage gestellt wurde.

Jetzt gibt es verschiedene Möglichkeiten md-icon

Die erste Möglichkeit besteht darin, SVG-Symbole zu verwenden.

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

Beispiel:

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

oder

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

: wo getMyIconist eine Methode definiert in $scope.

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

Um dies zu nutzen, muss der $mdIconProviderDienst Ihre Anwendung mit SVG-Iconsets konfigurieren.

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

Die zweite Möglichkeit besteht darin, Schriftsymbole zu verwenden.

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

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

Bevor Sie dies tun, müssen Sie die Schriftbibliothek wie folgt laden.

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

oder verwenden Sie Schriftsymbole mit Ligaturen

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

Weitere Details finden Sie in unserem

Dokumentation zur Angular Material mdIcon-Richtlinie

$ mdIcon Service-Dokumentation

$ mdIconProvider Service-Dokumentation

Der einfachste Weg wäre heute, einfach die Schriftart Material Icons von Google Fonts anzufordern, beispielsweise in Ihrem HTML-Header-Tag:

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

oder in Ihrem Stylesheet:

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

und dann als Schriftsymbol mit Ligaturen verwenden, wie in der Anweisung md-icon erläutert . Beispielsweise:

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

Die vollständige Liste der Symbole / Ligaturen finden Sie unter https://www.google.com/design/icons/

Es funktioniert jetzt tatsächlich von Laube.

bower install material-design-icons --save

Es lädt 37,1 KB herunter. Dann wird es extrahiert und installiert. Im Ordner bower_components wird ein Ordner mit dem Namen material-design-icons angezeigt. Die Gesamtgröße beträgt ca. 299 KB

md-icons sind noch nicht in der Laube Release von eckigem Material. Ich habe Polymers Symbole verwendet , sie werden wahrscheinlich sowieso gleich sein.

bower install polymer/core-icons

Einfacher Weg: Verwenden Sie das folgende CDN:

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

Injizieren Sie ngMdIcons in Ihre AngularJS-Anwendung:

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

Verwenden Sie die Direktive ng-md-icon in Ihrem HTML-Code und geben Sie die Füllfarbe über CSS an:

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

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

In ihrer neuesten Version gibt es eine Direktive namens md-icon

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

Alle md-Präfixe sind jetzt mat-zum Zeitpunkt des Schreibens Präfixe!

Setzen Sie dies in Ihren HTML-Kopf:

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

Import in unser Modul:

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

Verwenden Sie in Ihrem Code:

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

Hier ist die neueste Dokumentation:

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>

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

Verwenden Sie unter
Verwendung von CSS und Schriftart denselben Speicherort

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