Verwenden von eckigen 2 Material Icons

Ich versuche, eckigen Material 2 verwenden, um Symbole auf meiner Website anzuzeigen, aber ich bin ein wenig verwirrt.Verwenden von eckigen 2 Material Icons

Dies ist, wie es von der Demo in GitHub Repo von Material 2 arbeiten angenommen hat:

https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts

ich es benutzt habe versucht, aber keine Symbole überhaupt angezeigt werden.

Dies ist, wie ich sie aufrichten

app.component.ts

import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon'; 

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None, 
    viewProviders: [MdIconRegistry], 
    directives: [MdIcon], 
}) 
export class MyComponent{ 
    constructor(private router: Router, 
       private JwtService:JwtService, 
       mdIconRegistry: MdIconRegistry){ 
    mdIconRegistry.addSvgIconSetInNamespace('core', 'fonts/core-icon-set.svg') 
    } 
}

und die Vorlage ..

<md-icon>home</md-icon>

Die Seite lädt ohne Fehler, aber kein Symbol wird gezeigt. Was hätte schiefgehen können?

Quelle

2016-05-12 TheUnreal

Haben Sie das resultierende DOM untersucht? Wie sieht es aus? –

Es tut mir leid @ GünterZöchbauer, ich verstehe nicht was du damit meinst. – TheUnreal

Öffnen Sie Browser-Devtools und überprüfen Sie, wie das Ergebnis-DOM aussieht. Ich denke, das Icon-Demo ist irgendwo online verfügbar. Sie können das DOM des Symbols in Ihrer Anwendung und das in der Demo vergleichen. Vielleicht gibt es einen Hinweis darauf, was schief gelaufen sein könnte. –

Um MdIcon zu verwenden, müssen Sie die entsprechenden css Dateien einschließen. In Ihrem Code verwenden Sie die Standardschriftart, die Material Icons von Google ist.

Von angular-material2 repo:

standardmäßig die Material icons font verwendet wird. (Sie müssen immer noch den HTML-Code einfügen, um die Schriftart und deren CSS wie im Link beschrieben zu laden).

einfach, geben Sie einfach die CSS in index.html wie folgt aus:

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

Oder Sie können andere Verfahren zur Auswahl in der offiziellen Repo erwähnt importieren:

http://google.github.io/material-design-icons/#icon-font-for-the-web

Quelle

2016-05-13 02:04:36 Abdulrahman

Gilt das immer noch für den Wechsel zu einem Singular '@ angular/material'? – redfox05

@ redfox05 ja es tut, ich aktualisierte den Dokumentationslink in der Antwort. – Abdulrahman

Wenn Sie eine Art von Autoreload/Compiling verwenden, wie angular-cli (ng serve), erinnern Sie sich an cancel de service und relaunch ng driver – Dazag

-4

Sie auch müssen Http importieren.

import {HTTP_PROVIDERS} from '@angular/http'; 
import {MdIcon, MdIconRegistry} from '@angular2-material/icon'; 
@Component({ 
    template:`<md-icon>code</md-icon>` 
    directives:[MdIcon], 
    providers: [HTTP_PROVIDERS, MdIconRegistry] 
})

Quelle

2016-08-10 21:00:20

Würden Sie bitte weiter erklären? Mit der neuen NgModule API scheint das nicht richtig zu sein ... –

Das funktioniert nur mit Angular RC 4 –

Ab @ngModule Einführung von Angular RC5 Syntax beginnend wie folgt sein würde:

app-Beispiel-module.ts

import { MdIconModule, MdIconRegistry } from '@angular2-material/icon'; 

@NgModule({ 
    imports: [ 
     MdIconModule 
    ] 
    providers: [ 
     MdIconRegistry 
    ] 
}) 

export class AppExampleModule { 
    // 
}

app-Beispiel-component.ts

@Component({ 

    selector: 'app-header', 
    template: `<md-icon svgIcon="close"></md-icon>` 
}) 


export class AppExampleComponent 
{ 
    constructor(private mdIconRegistry: MdIconRegistry) { 
     mdIconRegistry 
      .addSvgIcon('close', '/icons/navigation/ic_close_36px.svg'); 
    } 
}

Quelle

2016-10-18 19:19:39 user991

mein Mann, das ist, was ich gesucht habe !!! als ein Kopf zu anderen, können Sie jetzt von @ angular/Material importieren – jemiloii

Es ist wichtig zu wissen, dass wir einen Unterstrich _ verwenden müssen, um einen Symbolraum getrennt zu verwenden (zum Beispiel Datei-Upload). Zum Beispiel:

<md-icon>file_upload</md-icon>

Quelle

2016-12-10 21:38:19 Milso

Guter Rat, aber das beantwortet die Frage nicht. – isherwood

Definitiv hilfreich Dank Milso, nirgends heißt es, Leerzeichen durch Unterstriche zu ersetzen. –

innen Stil.CSS kopieren und fügen Sie den folgenden: ---

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

und verwenden wie:

<md-icon>menu</md-icon> 
      ^--- icon name

Quelle

2016-12-20 09:51:31

In Winkel 4.3.3 mit @ Winkel/Material 2.0.0-beta-7 auch zu sanieren benötigen die URL

import { DomSanitizer } from '@angular/platform-browser'; 

export class AppComponent 
{ 
    constructor(
     private domSanitizer: DomSanitizer, 
     private mdIconRegistry: MdIconRegistry) { 
     mdIconRegistry.addSvgIcon('twitter', domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/twitter.svg')); 
    } 
}

Quelle

2017-08-26 23:30:00 mkaj

Dies ist der Weg, ich habe es versucht und es funktioniert.

mdIconRegistry.addSvgIcon('slider', sanitizer.bypassSecurityTrustResourceUrl('./assets/controls/slider.svg'));

Die Instanz mdIconRegistry wird über DI und fügen Sie benutzerdefinierte SVG addSvgIcon Methode zur Verfügung. Dann verwenden Sie <md-icon svgIcon="slider"> in Ihrer Vorlage.

Quelle

2017-12-07 03:43:20

Verwenden von eckigen 2 Material Icons

Antwort

Verwandte Themen