कोणीय सामग्री आइकन काम नहीं कर रहे हैं

Question 1

मैंने कोणीय के लिए सामग्री स्थापित की है,

मैंने अपने ऐप मॉड्यूल MatIconModule (के साथ import { MatIconModule } from '@angular/material/icon';) पर आयात किया है

मैंने इसे अपने ngmodule आयातों के साथ जोड़ा है:

@NgModule({
    imports: [ 
//...
MatIconModule, 
//...

मैंने सभी स्टाइलशीट आयात किए हैं

और मैंने इसे अपने ऐप कंपोनेंट में भी इंपोर्ट किया है जो वास्तव में (इनकी import {MatIconModule} from '@angular/material/icon';शुरुआत में एक और लाइन के साथ) यूज करने की कोशिश कर रहा है ।

लेकिन सामग्री आइकन अभी भी दिखाई नहीं देते हैं।

उदाहरण के लिए, इस पंक्ति के साथ:

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

मैं कुछ इस तरह की उम्मीद कर रहा हूँ:

लेकिन मुझे यह मिलता है:

कोई सुझाव मिला?

Question 2

सामग्री प्रतीक के लिए सीएसएस स्टाइलशीट जोड़ें!

अपने index.html में निम्नलिखित जोड़ें:

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

देखें - https://github.com/angular/material2/issues/7948

Question 3

कोणीय 6+ के लिए:

npm इसे स्थापित करें: npm install material-design-icons

स्टाइल्स को angular.json में जोड़ें:

"styles": [
  "node_modules/material-design-icons/iconfont/material-icons.css"
]

Question 4

यदि SASS का उपयोग करने के लिए आपको केवल इस लाइन को अपनी मुख्य .scssफ़ाइल में जोड़ना है :

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

यदि आप Google से आइकन प्राप्त करने से बचना पसंद करते हैं, तो आप सामग्री प्रतीक गाइड में वर्णित आइकन को स्वयं-होस्ट कर सकते हैं :

वेब फ़ॉन्ट को स्वयं होस्ट करने की चाह रखने वालों के लिए, कुछ अतिरिक्त सेटअप आवश्यक है। आइकन फ़ॉन्ट को किसी स्थान पर होस्ट करें, उदाहरण के लिए https://example.com/material-icons.woff और निम्नलिखित सीएसएस नियम जोड़ें:
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
इसके अलावा, आइकन को रेंडर करने के लिए सीएसएस नियमों को फ़ॉन्ट को ठीक से प्रस्तुत करने के लिए घोषित करने की आवश्यकता होगी। ये नियम सामान्य रूप से Google वेब फ़ॉन्ट स्टाइलशीट के हिस्से के रूप में दिए जाते हैं, लेकिन फ़ॉन्ट को सेल्फ होस्ट करते समय आपको अपनी परियोजनाओं में मैन्युअल रूप से शामिल करने की आवश्यकता होगी:
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Question 5

मेरे मामले में, एक शैली लागू थी जो फ़ॉन्ट परिवार को ओवरराइड करती है। इसलिए, मैंने फ़ॉन्ट परिवार शैली को स्पष्ट रूप से इस तरह जोड़ा:

.material-icons{
    font-family: 'Material Icons' !important;
}

Question 6

आपको MatIconModule को आयात करना चाहिए और index.html में निम्न यूआरएल का उपयोग करना चाहिए

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

Question 7

पूर्ण समाधान हो सकता है:

पहला कदम

आपको MatIconModuleअपनी परियोजना में आयात करना होगा, मेरी परियोजना में मैं एक अलग फ़ाइल में आवश्यक घटक आयात करता हूं फिर मैं इसे AppModule में आयात करता हूं, आप इसका उपयोग कर सकते हैं या उन्हें सीधे आयात कर सकते हैं:

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

दूसरा चरण

आइकन फ़ॉन्ट को अपने में लोड करें index.html:

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

Question 8

मेरे मामले में, मेरे द्वारा लिखा गया आइकन नाम किसी भी आइकन से जुड़ा नहीं था।

आप यहाँ सही नामों की जाँच कर सकते हैं: https://material.io/tools/icons/?style=baseline

Question 9

मेरे मामले में आइकन दिखाई नहीं दिए क्योंकि मैंने महत्वपूर्ण उपयोग करके अपने फोंट को खराब कर दिया है। बाहर ले जाने के कारण आइकन दिखाई दिए।

Question 10

मैं मेरे लिए प्रदर्शित नहीं होने वाले आइकन के मुद्दे में भाग गया। मैंने बसवराज भुसानी द्वारा प्रदान किए गए कदमों का पालन किया था लेकिन अभी भी काम नहीं कर रहा है।

मैंने पाया कि मुद्दा यह था कि मेरी स्कैस में, मेरे पास text-transform: uppercaseवह आइकन था जो सामग्री को केवल 'arrow_forward' प्रदर्शित करने के लिए प्रेरित कर रहा था । मुझे text-transform: noneविशेष रूप से आइकन पर बदलना होगा अन्यथा यह रेंडर नहीं होगा।

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }

Question 11

मैंने महसूस किया कि किसी ने भी अपने ऐप को आयात करने से पहले पहली बार में हथौड़े चलाने की बात नहीं की। वैसे लोगों के लिए जिनके पास एक समान मुद्दा है आपको पहली बार में हथौड़े को आयात करने की आवश्यकता है, आप स्थापना के लिए या तो एनपीएम, यार्न या गूगल सीडीएन का उपयोग कर सकते हैं। यह उत्तर एनपीएम या यार्न के साथ संस्थापन के लिए है:

NPM

npm install --save hammerjs

धागा

yarn add hammerjs

इंस्टॉल करने के बाद, इसे अपने ऐप के प्रवेश बिंदु (जैसे src / main.ts) पर आयात करें।

import 'hammerjs';

अगर आप Google CDN का उपयोग करना चाहते हैं तो कृपया अधिक विवरण के लिए कोणीय सामग्री पर जाएँ https://material.angular.io/guide/getting-started

Question 12

गलत चिह्न का नाम : कुछ सामग्री चिह्न का नाम गलत है।

उदाहरण के लिए : सामग्री चिह्न के लिए filter_alt प्रदान करता है

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

लेकिन यह 😟 दिखाता है

फिक्स: हमें फ़नल प्रकार आइकन के लिए filter_list_alt का उपयोग करना होगा

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>

Question 13

यदि आपने कुछ मौजूदा कोणीय सामग्री स्टाइल या किसी अन्य स्टाइल को अधिलेखित कर दिया है जो किसी भी तरह से आइकन को प्रभावित करता है, तो यह एक समस्या का कारण हो सकता है। किसी भी स्टाइल और परीक्षण के बाहर आइकन कोड को स्थानांतरित करें।

मेरे लिए यह फ़ॉन्ट-संस्करण था: छोटे-कैप;

इसलिए मैंने इसे बाल तत्व में स्थानांतरित कर दिया। नीचे कोणीय सामग्री ग्रिड का हिस्सा है।

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>

Question 14

बस अपने index.html में निम्नलिखित जोड़ें:

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

Question 15

**Add following code to your css**

 .material-icons {  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;

    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}