ไอคอน Angular Material ไม่ทำงาน

ฉันได้ติดตั้งวัสดุสำหรับเชิงมุมแล้ว

ฉันนำเข้าในโมดูลแอป MatIconModule (with 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>

ฉันคาดหวังสิ่งนี้:

แต่ฉันได้รับสิ่งนี้:

มีข้อเสนอแนะหรือไม่?

เพิ่มสไตล์ชีต CSS สำหรับไอคอนวัสดุ!

เพิ่มสิ่งต่อไปนี้ใน index.html ของคุณ:

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

อ้างอิง - https://github.com/angular/material2/issues/7948

สำหรับ Angular 6+:

1. npm ติดตั้งสิ่งนี้: npm install material-design-icons

2. เพิ่มสไตล์ให้กับ angular.json:

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

หากใช้ SASS คุณจะต้องเพิ่มบรรทัดนี้ใน.scssไฟล์หลักของคุณเท่านั้น:

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

หากคุณต้องการหลีกเลี่ยงการดึงไอคอนจาก Google คุณสามารถโฮสต์ไอคอนด้วยตนเองตามที่อธิบายไว้ในคู่มือไอคอนวัสดุ :

สำหรับผู้ที่ต้องการโฮสต์แบบอักษรของเว็บด้วยตนเองจำเป็นต้องมีการตั้งค่าเพิ่มเติมบางอย่าง โฮสต์แบบอักษรไอคอนในตำแหน่งตัวอย่างเช่น https://example.com/material-icons.woffและเพิ่มกฎ CSS ต่อไปนี้:

@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');
}

นอกจากนี้ต้องมีการประกาศกฎ CSS สำหรับการแสดงผลไอคอนเพื่อแสดงผลแบบอักษรอย่างถูกต้อง โดยปกติกฎเหล่านี้จะใช้เป็นส่วนหนึ่งของสไตล์ชีต Google Web Font แต่จะต้องรวมไว้ในโปรเจ็กต์ของคุณด้วยตนเองเมื่อโฮสต์ฟอนต์ด้วยตนเอง:

.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';
}

คุณต้องนำเข้าMatIconModuleและใช้ url ต่อไปนี้ใน index.html

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

ในกรณีของฉันมีการใช้สไตล์ที่ลบล้างตระกูลฟอนต์ ดังนั้นฉันจึงเพิ่มรูปแบบตระกูลฟอนต์อย่างชัดเจนเช่นนี้:

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

โซลูชันเต็มรูปแบบสามารถ:

ขั้นตอนแรก

คุณต้องนำเข้า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">

ในกรณีของฉันชื่อไอคอนที่ฉันเขียนไม่เกี่ยวข้องกับไอคอนใด ๆ

คุณสามารถตรวจสอบชื่อที่ถูกต้องได้ที่นี่: https://material.io/tools/icons/?style=baseline

ในกรณีของฉันไอคอนไม่ปรากฏขึ้นเนื่องจากฉันทำให้แบบอักษรของฉันเสียหายโดยใช้! important การเอาออกทำให้ไอคอนปรากฏขึ้น

ฉันพบปัญหาของไอคอนที่ไม่แสดงให้ฉันเห็น ฉันทำตามขั้นตอนที่ Basavaraj Bhusani ให้ไว้แล้ว แต่ก็ยังไม่ได้ผล

ฉันพบปัญหาคือใน scss ของฉันฉันมีสิ่ง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';

                    }

ฉันตระหนักว่าไม่มีใครพูดถึงการติดตั้ง hammerJs ในตอนแรกก่อนที่จะนำเข้าสู่แอปของคุณ สำหรับผู้ที่มีปัญหาคล้ายกันคุณต้องนำเข้า hammerJs ในตอนแรกคุณสามารถใช้ NPM, Yarn หรือ google CDN สำหรับการติดตั้ง คำตอบนี้ใช้สำหรับการติดตั้งด้วย NPM หรือ Yarn:

NPM

npm install --save hammerjs

เส้นด้าย

yarn add hammerjs

หลังจากติดตั้งแล้วให้นำเข้าที่จุดเริ่มต้นของแอปของคุณ (เช่น src / main.ts)

import 'hammerjs';

หากคุณต้องการใช้ Google CDN โปรดไปที่เอกสารเชิงมุมสำหรับคำอธิบายเพิ่มเติมhttps://material.angular.io/guide/getting-started

ชื่อไอคอนผิด : ชื่อไอคอนวัสดุบางรายการไม่ถูกต้อง

ตัวอย่างเช่น : วัสดุไอคอนให้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>

หากคุณเขียนทับรูปแบบวัสดุเชิงมุมที่มีอยู่บางส่วนหรือรูปแบบอื่น ๆ ที่ส่งผลกระทบต่อไอคอนอย่างใดก็อาจทำให้เกิดปัญหาได้ ย้ายรหัสไอคอนออกนอกรูปแบบและการทดสอบ

สำหรับฉันแล้วมันเป็นแบบอักษร: small-caps;

ดังนั้นฉันจึงย้ายมันไปยังองค์ประกอบลูก ด้านล่างนี้เป็นส่วนหนึ่งของกริดวัสดุเชิงมุม

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

เพียงเพิ่มสิ่งต่อไปนี้ใน index.html ของคุณ:

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

**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';
}