it-swarm.asia

Malzeme simgesi düzgün şekilde oluşturulmuyor

Projemde malzeme simgesi düzgün görüntülenmiyor, düzgün takıldım ancak tarayıcıda gösterilmese bile.

aşağıdaki adımları takip ettim:

npm install material-design-icons

.angular-cli.json

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

app.module.ts

import {MatSidenavModule, MatToolbarModule, MatIconModule} from '@angular/material';

app.component.html

<mat-toolbar-row>
    <span>Second Line</span>
    <span class="example-spacer"></span>
    <mat-icon class="example-icon">verified_user</mat-icon>
  </mat-toolbar-row>
13
dhana

Ben de aynı sorunu yaşadım. Çünkü benim tema.scss içindeki fontlardan önce materyal temasını içe aktarıyordum.

Olmalı:

@import url( 'https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');

@import '[email protected]/material/theming';
18
Chris Fremgen

Aynı sorunu yaşadım, çünkü modülü NgModule.imports'a eklemeyi unuttum.

@NgModule({
  imports: [
    MatIconModule
  ]
})
2
Dung-Tri LE

index.html'nuza aşağıdakileri ekleyerek google CDN'yi kullanmayı düşünün:

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

Düzenle:

cSS dosyasını taşıyın/indirin ve varlıklar klasörünüze yerleştirin, ardından angular-cli.json içine stiller dizinize aşağıdakileri ekleyin:

"../src/assets/material-icons.css"
1
Hamed Baatour

Kendi yazı tipimi kendim yazdım !important

simgeleri daha önemli kılmak zorunda kaldım:

.lato * {
  font-family: 'Lato' !important;
}

.mat-icon{
  font-family: 'Material Icons' !important;
}
0

Konsolunuzda çeşitli hatalar olup olmadığını kontrol edin. 

Bileşeninizde çeşitli bir hata varsa, mat-icon'nuzun düzgün şekilde başlatılmasını engelliyor olabilir ve bunun yerine glifin metinsel gösterimini görebilirsiniz.

0
Simon_Weaver

Angular 6'da buna rastladım, çözüm mat-icon-button ekleyerek sona erdi,

<button mat-icon-button type="button" 
    (click)="yourMethod()">
    <mat-icon>delete</mat-icon>
</button>

App.module.ts içe aktarma işleminize MatIconModule eklediğinizden emin olun ve bir cazibe gibi çalışmalıdır.

0
Goran Šutić

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

bunun index.html'nize eklendiğinden emin olun.

0
headmelon