Biểu tượng Angular Material không hoạt động

Tôi đã cài đặt Material cho góc cạnh,

Tôi đã nhập vào mô-đun ứng dụng của mình MatIconModule (với import { MatIconModule } from '@angular/material/icon';)

Tôi đã thêm nó vào mục nhập ngmodule của mình với:

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

Tôi đã nhập tất cả các bảng định kiểu

Và tôi cũng đã nhập nó vào thành phần ứng dụng của mình đang thực sự (đang cố) sử dụng chúng (với một import {MatIconModule} from '@angular/material/icon';dòng khác ở đầu).

Nhưng các biểu tượng vật chất vẫn không xuất hiện.

Ví dụ, với dòng này:

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

Tôi đang mong đợi một cái gì đó như thế này:

Nhưng tôi hiểu điều này:

Có bất kỳ đề nghị?

Thêm biểu định kiểu CSS cho Biểu tượng Vật liệu!

Thêm phần sau vào index.html của bạn:

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

Tham khảo - https://github.com/angular/material2/issues/7948

Đối với Angular 6+:

1. npm cài đặt cái này: npm install material-design-icons

2. thêm các kiểu vào angle.json:

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

Nếu sử dụng SASS, bạn chỉ cần thêm dòng này vào .scsstệp chính của mình :

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

Nếu bạn muốn tránh tìm nạp các biểu tượng từ google, bạn cũng có thể tự lưu trữ các biểu tượng như được mô tả trong Hướng dẫn về Biểu tượng Vật liệu :

Đối với những người muốn tự lưu trữ phông chữ web, một số thiết lập bổ sung là cần thiết. Lưu trữ phông chữ biểu tượng ở một vị trí, ví dụ: https://example.com/material-icons.woff và thêm quy tắc CSS sau:

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

Ngoài ra, các quy tắc CSS để hiển thị biểu tượng sẽ cần được khai báo để hiển thị phông chữ đúng cách. Các quy tắc này thường được phục vụ như một phần của biểu định kiểu Phông chữ Web của Google, nhưng sẽ cần được đưa vào các dự án của bạn theo cách thủ công khi tự lưu trữ phông chữ:

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

Bạn phải nhập MatIconModule và sử dụng url sau trong index.html

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

Trong trường hợp của tôi, có một kiểu được áp dụng ghi đè họ phông chữ. Vì vậy, tôi đã thêm kiểu gia đình phông chữ một cách rõ ràng như thế này:

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

Giải pháp đầy đủ có thể là:

Bước một

Bạn phải nhập MatIconModulevào dự án của mình, trong dự án của tôi, tôi nhập thành phần cần thiết trong một tệp riêng biệt, sau đó tôi nhập thành phần đó trong AppModule, bạn có thể sử dụng điều này hoặc nhập trực tiếp chúng:

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

Bước hai

Tải phông chữ biểu tượng trong index.html:

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

Trong trường hợp của tôi, tên biểu tượng tôi đã viết không được liên kết với bất kỳ biểu tượng nào.

Bạn có thể kiểm tra tên chính xác tại đây: https://material.io/tools/icons/?style=baseline

Trong trường hợp của tôi, các biểu tượng không hiển thị vì tôi đã sửa đổi phông chữ của mình bằng cách sử dụng! Important. Việc loại bỏ điều đó khiến các biểu tượng xuất hiện.

Tôi gặp phải vấn đề biểu tượng không hiển thị cho tôi. Tôi đã làm theo các bước do Basavaraj Bhusani cung cấp nhưng vẫn không hoạt động.

Tôi nhận thấy vấn đề là trong scss của mình, tôi đã gặp phải vấn đề text-transform: uppercasekhiến biểu tượng chỉ hiển thị nội dung 'arrow_ntic'. Tôi đã phải thay đổi text-transform: nonecụ thể biểu tượng trên biểu tượng nếu không nó sẽ không hiển thị.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

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

                    }

Tôi nhận ra rằng ban đầu không ai nói về việc cài đặt hammerJs trước khi nhập nó vào ứng dụng của bạn. Đối với những người gặp vấn đề tương tự, ban đầu bạn cần nhập hammerJs, bạn có thể sử dụng NPM, Yarn hoặc google CDN để cài đặt. Câu trả lời này dành cho cài đặt với NPM hoặc Yarn:

NPM

npm install --save hammerjs

Sợi

yarn add hammerjs

Sau khi cài đặt, hãy nhập nó vào điểm nhập của ứng dụng của bạn (ví dụ: src / main.ts).

import 'hammerjs';

Nếu bạn thích sử dụng Google CDN, vui lòng truy cập tài liệu Angular để được giải thích thêm https://material.angular.io/guide/getting-started

Tên Biểu tượng Sai : Tên Biểu tượng Vật liệu nào đó bị sai.

Ví dụ : Material Icon cung cấp filter_alt cho

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

nhưng nó hiển thị 😟

Khắc phục: chúng ta phải sử dụng filter_list_alt cho biểu tượng loại kênh như

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

Nếu bạn đã ghi đè một số kiểu dáng Angular Material hiện có hoặc bất kỳ kiểu nào khác ảnh hưởng đến biểu tượng, điều đó có thể gây ra sự cố. Di chuyển mã biểu tượng ra bên ngoài bất kỳ kiểu dáng và thử nghiệm nào.

Đối với tôi, đó là font-variant: small-caps;

Vì vậy, tôi chỉ cần chuyển nó vào phần tử con. Dưới đây là một phần của lưới Vật liệu góc.

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

Chỉ cần Thêm phần sau vào index.html của bạn:

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