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

102

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.

Adil Malik
quelle

Antworten:

151

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

Adil Malik
quelle
1
Kurzer Hinweis zu Ligaturen: Verwenden Sie Unterstriche anstelle von Bindestrichen. Es ist wahrscheinlich irgendwo in Ihren weiteren Details Links dokumentiert, aber niemand hat Zeit für Daten. ;-)
Olson.dev
Was ist der richtige Weg, um sie zu färben?
Theblang
@mattblang Wenn Sie sie als Schriftart verwenden, ist es nur eine Schriftart. Wenn Sie also die Textfarbe in CSS festlegen (wie {Farbe: Rot}), werden sie eingefärbt.
Tanou
1
Genau das, was ich brauchte. Ich hatte Probleme mit dem Stil während der Verwendung <i class='material-icons'>icon_name</i>, md-font-librarylöste aber mein Problem perfekt.
Pieter VDE
Warum funktioniert eine Variable in md-icon nicht? wie <md-icon md-font-library = "material-icons"> {{user.type}} </ md -icon> .. in diesem Fall user.type = "face" und als Text funktioniert es < md-icon md-font-library = "Material-Icons"> Gesicht </ md
-icon
31

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/

Jesús Carrera
quelle
Wie füge ich einer Schaltfläche ein Symbol hinzu?
Alexander Mills
28

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

rahul
quelle
20
Und wie benutzt man es dann?
Ernst Ernst
6

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
Ryan Metin
quelle
5

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/

Asqan
quelle
2
Es ist ärgerlich, ng-mddas Symbol nicht in Symbolschaltflächen zu zentrieren, wie es md-icon tut.
Mustafa
ja das gleiche problem hier. Meistens müssen Sie die Positionen mit CSS verfeinern. position:relative;und verschieben Sie dann das SVG-Element oder den Container by left-top-right-bottoman die gewünschte bessere Position.
Asqan
3

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

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>
sgimeno
quelle
4
Laube installieren material-design-icons github.com/google/material-design-icons
neofreko
5
Laden Sie es herunter, verwenden Sie keine Laube. Es ist 57MB
Neofreko
1

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

Joshua Michael Waggoner
quelle
OP verwendet AngularJS-Material.
Edric
0

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;
}
Kamlesh
quelle