Açısal Malzeme simgeleri çalışmıyor

Açısal için Malzeme yükledim,

Uygulama modülüm MatIconModule (ile import { MatIconModule } from '@angular/material/icon';) içe aktardım

Bunu ngmodule içe aktarmalarımın altına ekledim:

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

Tüm stil sayfalarını içe aktardım

Ve aslında onları kullanan ( import {MatIconModule} from '@angular/material/icon';başında başka bir satır olan) uygulama bileşenime de aktardım .

Ancak maddi simgeler hala görünmüyor.

Örneğin, bu satırla:

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

Bunun gibi bir şey bekliyorum:

Ama şunu anlıyorum:

Herhangi bir öneriniz var mı?

Malzeme Simgeleri için CSS stil sayfası ekleyin!

Aşağıdakileri index.html dosyanıza ekleyin:

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

Bakınız - https://github.com/angular/material2/issues/7948

Angular 6+ için:

1. npm şunu yükle: npm install material-design-icons

2. stilleri angular.json'a ekleyin:

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

SASS kullanıyorsanız, yalnızca bu satırı ana .scssdosyanıza eklemeniz gerekir :

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

Google'dan simge almaktan kaçınmayı tercih ederseniz, Simgeleri Materyal Simgeleri Kılavuzu'nda açıklandığı gibi kendiniz de barındırabilirsiniz :

Web yazı tipini kendi kendine barındırmak isteyenler için bazı ek kurulumlar gereklidir. Simge yazı tipini bir konumda barındırın, örneğin https://example.com/material-icons.woff ve aşağıdaki CSS kuralını ekleyin:

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

Ek olarak, yazı tipini düzgün şekilde işlemek için simgeyi oluşturmaya yönelik CSS kurallarının da bildirilmesi gerekecektir. Bu kurallar normalde Google Web Yazı Tipi stil sayfasının bir parçası olarak sunulur, ancak yazı tipini kendi kendine barındırırken projelerinize manuel olarak dahil edilmeleri gerekir:

.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'u içe aktarmalı ve index.html'de aşağıdaki url'yi kullanmalısınız

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

Benim durumumda, yazı tipi ailesini geçersiz kılan bir stil uygulandı. Bu yüzden, yazı tipi ailesi stilini açıkça şöyle ekledim:

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

Tam çözüm şunlar olabilir:

Adım bir

Sen ithalat zorunda MatIconModuleprojemde ben, bu kullanabilir veya bunları doğrudan alabilir sonra ben AppModule bunu ithal ayrı bir dosyada gerekli bileşeni içe, projenizde:

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

İkinci adım

Simge yazı tipini şuraya yükleyin index.html:

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

Benim durumumda, yazdığım simge adı herhangi bir simgeyle ilişkilendirilmedi.

Doğru isimleri buradan kontrol edebilirsiniz: https://material.io/tools/icons/?style=baseline

Benim durumumda, yazı tiplerimi! Önemli kullanarak bozduğum için simgeler görünmedi. Bunu çıkarmak simgelerin görünmesine neden oldu.

Benim için görüntülenmeyen simgelerin sorunuyla karşılaştım. Basavaraj Bhusani tarafından sağlanan adımları takip ettim, ancak hala çalışmıyor.

Sorunun, scss'imde text-transform: uppercasesimgenin yalnızca 'arrow_forward' içeriğini görüntülemesine neden olana sahip olduğumu buldum. text-transform: noneSimgeyi özellikle değiştirmek zorunda kaldım, aksi takdirde görüntülenmezdi.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

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

                    }

HammerJ'leri uygulamanıza aktarmadan önce hiç kimsenin ilk önce yüklemekten bahsetmediğini fark ettim. Benzer bir sorunu olan kişiler için ilk önce hammerJ'leri içe aktarmanız gerekir, kurulum için NPM, Yarn veya google CDN kullanabilirsiniz. Bu cevap, NPM veya İplik ile kurulum içindir:

NPM

npm install --save hammerjs

İplik

yarn add hammerjs

Yükledikten sonra, uygulamanızın giriş noktasına aktarın (ör. Src / main.ts).

import 'hammerjs';

Google CDN kullanmayı tercih ederseniz, daha fazla açıklama için lütfen Angular materyalini ziyaret edin https://material.angular.io/guide/getting-started

Yanlış Simge Adı : Bazı Malzeme Simgesi adları yanlış.

Örneğin : Malzeme Simge sağlar filter_alt için

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

ama ortaya çıkıyor 😟

Düzeltme: huni türü simgesi için filter_list_alt kullanmalıyız

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

Bazı mevcut Açısal Malzeme stillerinin veya simgeyi bir şekilde etkileyen başka stillerin üzerine yazdıysanız, bu bir soruna neden olabilir. Simge kodunu herhangi bir stil ve testin dışına taşıyın.

Benim için yazı tipi varyantıydı: küçük büyük harfler;

Ben de onu alt öğeye taşıdım. Aşağıda, Açısal Malzeme ızgarasının bir parçasıdır.

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

Aşağıdakileri index.html dosyanıza eklemeniz yeterlidir:

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