web-dev-qa-db-ja.com

マテリアルアイコンが正しくレンダリングされない

私のプロジェクトではマテリアルアイコンが正しくレンダリングされません。適切にインストールされていますが、ブラウザに表示されていません。

私は以下の手順に従いました：

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>
angularmaterialgoogle-material-icons
18
dhana

同じ問題がありました。 theme.scssのフォントの前にマテリアルテーマをインポートしていたために発生しました。

する必要があります：

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

@import '~@angular/material/theming';
22
Chris Fremgen

独自のテキストフォント!important

アイコンをより重要にする必要がありました。

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

.mat-icon{
  font-family: 'Material Icons' !important;
}
3
jenson-button-event

NgModule.importsにモジュールを追加するのを忘れたため、同じ問題が発生しました。

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

index.htmlに次を追加して、代わりにGoogle CDNの使用を検討してください。

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

編集：

cSSファイルを移動/ダウンロードして、アセットフォルダーに配置し、angular-cli.jsonに以下をスタイルアレイに追加します。

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

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

これがindex.htmlに追加されていることを確認してください。

1
headmelon

その他のエラーについては、コンソールを確認してください。

コンポーネントにその他のエラーがある場合、mat-iconを適切に初期化すると、代わりにグリフのテキスト表現が表示されます。

0
Simon_Weaver

Angular 6でこれを実行しました。ソリューションはmat-icon-buttonを追加することになりました

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

必ず、MatIconModuleをapp.module.tsのインポートに追加してください。これはチャームのように機能するはずです。

0
Goran Šutić