Da die anderen Antworten mein Anliegen nicht angesprochen haben, habe ich beschlossen, meine eigene Antwort zu schreiben.
Der im md-icon
Symbolattribut 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-icon
ist 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 getMyIcon
ist eine Methode definiert in $scope
.
oder
<md-icon md-svg-icon="social:android"></md-icon>
Um dies zu nutzen, muss der $mdIconProvider
Dienst 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
<i class='material-icons'>icon_name</i>
,md-font-library
löste aber mein Problem perfekt.Der einfachste Weg wäre heute, einfach die Schriftart Material Icons von Google Fonts anzufordern, beispielsweise in Ihrem HTML-Header-Tag:
oder in Ihrem Stylesheet:
und dann als Schriftsymbol mit Ligaturen verwenden, wie in der Anweisung md-icon erläutert . Beispielsweise:
Die vollständige Liste der Symbole / Ligaturen finden Sie unter https://www.google.com/design/icons/
quelle
Es funktioniert jetzt tatsächlich von Laube.
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
quelle
md-icons sind noch nicht in der Laube Release von eckigem Material. Ich habe Polymers Symbole verwendet , sie werden wahrscheinlich sowieso gleich sein.
quelle
Einfacher Weg: Verwenden Sie das folgende CDN:
Injizieren Sie ngMdIcons in Ihre AngularJS-Anwendung:
Verwenden Sie die Direktive ng-md-icon in Ihrem HTML-Code und geben Sie die Füllfarbe über CSS an:
Quelle: https://klarsys.github.io/angular-material-icons/
quelle
ng-md
das Symbol nicht in Symbolschaltflächen zu zentrieren, wie es md-icon tut.position:relative;
und verschieben Sie dann das SVG-Element oder den Containerby left-top-right-bottom
an die gewünschte bessere Position.In ihrer neuesten Version gibt es eine Direktive namens
md-icon
quelle
Alle
md-
Präfixe sind jetztmat-
zum Zeitpunkt des Schreibens Präfixe!Setzen Sie dies in Ihren HTML-Kopf:
Import in unser Modul:
Verwenden Sie in Ihrem Code:
Hier ist die neueste Dokumentation:
https://material.angular.io/components/icon/overview
quelle
Quelle: https://material.angularjs.org/#/demo/material.components.button
quelle
Verwenden Sie unter
Verwendung von CSS und Schriftart denselben Speicherort
quelle