एमडी-आइकन के लिए फ़ॉन्ट-भयानक तरीके से सही तरीके से पंजीकरण कैसे करें?

Question

md-icon के प्रलेखन कैसे फ़ॉन्ट भयानक कई हिस्सों में उपयोग करने के लिए वर्णन करता है और हम

<md-icon fontSet="fa" fontIcon="alarm"></md-icon> 

की तरह अंत में फ़ॉन्ट भयानक इस्तेमाल कर सकते हैं पता चलता है लेकिन प्रलेखन बहुत भ्रामक है और मैं शायद ही 3 फ़ॉन्ट का पंजीकरण करने के लिए एक नियमित पा सकते हैं Google के माध्यम से एमडी-आइकन के लिए फ़ॉन्ट-कमाल की तरह सेट करें।

किसी भी मदद की सराहना की जाती है!

पीएस: मुझे सामान्य <i> आमतौर पर काम करता है, लेकिन यह examples में काम नहीं कर रहा है, जहां मूल रूप से md-icon का उपयोग किया जाता है।

Answer 1

जोड़ें फॉन्ट अपने index.html फ़ाइल में भयानक cdn लिंक:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

फिर इस कोड डालने की कोशिश, यह मेरे लिए काम कर रहा है:

<md-icon class="fa fa-clock-o" aria-hidden="true"></md-icon> 
<md-icon class="fa fa-bell" aria-hidden="true"></md-icon> 

Answer 2

अपने AppModule ऐड में:

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

फिर अपने आयात में MatIconModule जोड़ें उदाहरण:

imports: [... 
    MatIconModule 
...] 

MatIconRegistry अपने प्रदाताओं में जोड़ें:

export class AppModule { 
    constructor(
     ...public matIconRegistry: MatIconRegistry) { 
     matIconRegistry.registerFontClassAlias('fontawesome', 'fa'); 
    } 

तो फिर तुम तो जैसे अपनी परियोजना में कहीं भी उपयोग कर सकते हैं:

<mat-icon fontSet="fa" fontIcon="fa-times-circle"></mat-icon> 

providers: [... 
    MatIconRegistry 
....] 

फिर अपने AppModule वर्ग के लिए निम्नलिखित जोड़ें

अद्यतन

आपको कहीं भी अपनी परियोजना में Fontawesome शामिल करने की आवश्यकता होगी। मैं कोणीय CLI इतना जोड़ने फ़ॉन्ट भयानक NPM पैकेज का उपयोग करें: कोणीय cli.json फ़ाइल में शैलियों की सूची में

npm install font-awesome --save 

और यह भी शामिल है मेरे लिए काम करता है:

"styles": [ 
    ... 
    "../node_modules/font-awesome/scss/font-awesome.scss", 
    ], 

अद्यतन 2

कोणीय सामग्री के हालिया अपडेट को दर्शाने के लिए 'मैट' में बदल गए उपसर्ग।

Answer 3

अपने सूचकांक में फ़ॉन्ट को भयानक जोड़ें।html पृष्ठ:

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

@NgModule({ 
    declarations: [], 
    imports: [ 
    MatIconModule 
    ]... 

अंत में, अपने app.component.html में आइकन जोड़ने:

<mat-icon>menu</mat-icon>