Ikon Material Angular tidak berfungsi

Saya telah menginstal Material untuk sudut,

Saya telah mengimpor pada modul aplikasi saya MatIconModule (dengan import { MatIconModule } from '@angular/material/icon';)

Saya telah menambahkannya di bawah impor ngmodule saya dengan:

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

Saya telah mengimpor semua stylesheet

Dan saya juga mengimpornya ke komponen aplikasi saya yang sebenarnya (mencoba) menggunakannya (dengan import {MatIconModule} from '@angular/material/icon';baris lain di awal).

Tapi ikon material masih belum muncul.

Misalnya, dengan baris ini:

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

Saya mengharapkan sesuatu seperti ini:

Tapi saya mengerti ini:

Punya saran?

Tambahkan stylesheet CSS untuk Ikon Material!

Tambahkan berikut ini ke index.html Anda:

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

Lihat - https://github.com/angular/material2/issues/7948

Untuk Angular 6+:

1. npm instal ini: npm install material-design-icons

2. tambahkan gaya ke angular.json:

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

Jika menggunakan SASS Anda hanya perlu menambahkan baris ini ke .scssfile utama Anda :

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

Jika Anda lebih suka menghindari pengambilan ikon dari google, Anda juga dapat menghosting ikon sendiri seperti yang dijelaskan di Panduan Ikon Material :

Bagi mereka yang ingin menghosting sendiri font web, diperlukan beberapa penyiapan tambahan. Hosting font ikon di suatu lokasi, misalnya https://example.com/material-icons.woff dan tambahkan aturan CSS berikut:

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

Selain itu, aturan CSS untuk merender ikon perlu dideklarasikan untuk merender font dengan benar. Aturan ini biasanya disajikan sebagai bagian dari lembar gaya Font Web Google, tetapi perlu disertakan secara manual dalam proyek Anda saat menghosting sendiri 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';
}

Anda harus mengimpor MatIconModule dan menggunakan url berikut di index.html

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

Dalam kasus saya, ada gaya yang diterapkan yang menggantikan jenis font. Jadi, saya menambahkan gaya font keluarga secara eksplisit seperti ini:

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

Solusi lengkapnya bisa jadi:

Langkah pertama

Anda harus mengimpor MatIconModuledalam proyek Anda, dalam proyek saya, saya mengimpor komponen yang diperlukan dalam file terpisah lalu saya mengimpornya di AppModule, Anda dapat menggunakan ini atau mengimpornya secara langsung:

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

Langkah kedua

Muat font ikon di index.html:

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

Dalam kasus saya, nama ikon yang saya tulis tidak terkait dengan ikon apa pun.

Anda dapat memeriksa nama yang benar di sini: https://material.io/tools/icons/?style=baseline

Dalam kasus saya, ikon tidak muncul karena saya telah mengacaukan font saya dengan menggunakan! Important. Menghapusnya menyebabkan ikon muncul.

Saya mengalami masalah ikon tidak ditampilkan untuk saya. Saya telah mengikuti langkah-langkah yang diberikan oleh Basavaraj Bhusani namun tetap tidak berhasil.

Saya menemukan masalahnya adalah bahwa di scss saya, saya memiliki text-transform: uppercaseyang menyebabkan ikon hanya menampilkan konten 'arrow_forward'. Saya harus mengubah text-transform: noneikon secara khusus jika tidak maka tidak akan merender.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

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

                    }

Saya menyadari tidak ada yang berbicara tentang menginstal hammerJs pada awalnya sebelum mengimpornya ke aplikasi Anda. Nah bagi orang-orang yang memiliki masalah serupa Anda perlu mengimpor hammerJ terlebih dahulu, Anda dapat menggunakan NPM, Yarn atau google CDN untuk instalasi. Jawaban ini untuk instalasi dengan NPM atau Yarn:

NPM

npm install --save hammerjs

Benang

yarn add hammerjs

Setelah menginstal, impor di titik masuk aplikasi Anda (mis. Src / main.ts).

import 'hammerjs';

Jika Anda lebih suka menggunakan Google CDN, silakan kunjungi materi Angular untuk penjelasan lebih lanjut https://material.angular.io/guide/getting-started

Nama Ikon Salah : Beberapa nama Ikon Material salah.

Misalnya : Ikon Material menyediakan filter_alt untuk

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

tapi itu muncul 😟

Perbaiki: kita harus menggunakan filter_list_alt untuk ikon jenis corong sebagai

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

Jika Anda telah menimpa beberapa gaya Material Angular yang ada atau gaya lain yang entah bagaimana memengaruhi ikon, ini dapat menyebabkan masalah. Pindahkan kode ikon di luar gaya dan tes apa pun.

Bagi saya itu font-variant: small-caps;

Jadi saya baru saja memindahkannya ke elemen anak. Di bawah ini adalah bagian dari kisi Material Angular.

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

Cukup Tambahkan berikut ini ke index.html Anda:

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