it-swarm.com.de

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 vermute, es gibt ein Problem mit dem Pfad, der als Parameter für das Symbolattribut angegeben wurde. Ich möchte wissen, wo sich dieser Icon-Ordner tatsächlich befindet?

102
Adil Malik

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

Der im icon-Attribut der Direktive md-icon 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 für diese Datei in das Symbolattribut eingeben. Stellen Sie die Datei in das richtige Verzeichnis, damit Ihr Server sie bedienen kann.

Denken Sie daran, md-icon Entspricht nicht den Symbolen bootstrap. Derzeit handelt es sich lediglich um eine Direktive, die eine .svg-Datei anzeigt.

Update

Seitdem diese Frage gestellt wurde, hat sich das Design von Winkelmaterialien stark verändert.

Nun gibt es verschiedene Möglichkeiten, md-icon Zu verwenden.

Die erste Möglichkeit ist die Verwendung von SVG-Symbolen.

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

: wobei getMyIcon eine in $scope definierte Methode ist.

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

um dies zu verwenden, müssen Sie den Dienst $mdIconProvider verwenden, um Ihre Anwendung mit SVG-Iconsets zu 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 ist die Verwendung von Schriftsymbolen.

<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 können, 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 unserer

Dokumentation zur Richtlinie für eckiges Material mdIcon

$ mdIcon Service Documentation

$ mdIconProvider Service Documentation

150
Adil Malik

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

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

oder in deinem Stylesheet:

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

und dann als Schriftsymbol mit Ligaturen verwenden, wie in der md-icon-Direktive erläutert. Zum Beispiel:

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

31
Jesús Carrera

Es funktioniert jetzt tatsächlich von Laube.

bower install material-design-icons --save

Es werden 37,1 KB heruntergeladen. Dann wird es extrahiert und installiert. Im Ordner bower_components sehen Sie einen Ordner namens material-design-icons. Die Gesamtgröße beträgt ca. 299 KB

28
rahul

md-icons sind noch nicht in der Bower-Version von eckigem Material enthalten. Ich habe Polymersymbole verwendet, sie werden wahrscheinlich sowieso gleich sein.

bower install polymer/core-icons
6
Ryan Metin

Einfacher Weg: Verwenden Sie die 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 anglejs-Anwendung:

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

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

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

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

5
Asqan

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

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

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

Tragen Sie dies in Ihren HTML-Kopf ein:

<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

Unter Verwendung von like
Verwenden Sie CSS und Schriftart am selben Ort

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

0
Zhorzh Alexandr