web-dev-qa-db-ja.com

Angular素材アイコンが機能しない

角度用のマテリアルをインストールしました

アプリモジュールMatIconModuleに（import { MatIconModule } from '@angular/material/icon';で）インポートしました

私はngmoduleインポートの下にそれを追加しました：

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

すべてのスタイルシートをインポートしました

また、実際に（しようとしている）アプリケーションコンポーネントにインポートしました（先頭に別のimport {MatIconModule} from '@angular/material/icon';行があります）。

ただし、マテリアルアイコンは表示されません。

たとえば、次の行では：

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

私はこのようなものを期待しています：

expected

しかし、私はこれを取得します：

actual

何か提案がありますか？

angularangular-materialangular-material2
37
user9557542

マテリアルアイコンのCSSスタイルシートを追加します！

以下をindex.htmlに追加します。

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

参照- https://github.com/angular/material2/issues/7948

83
Basavaraj Bhusani

SASSを使用している場合、メイン.scssファイルに次の行を追加する必要があります。

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

8
Vedran

MatIconModuleをインポートし、index.htmlで次のURLを使用する必要があります

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

完全なソリューションは次のとおりです。

ステップ1

プロジェクトにMatIconModuleをインポートする必要があります。私のプロジェクトでは、必要なコンポーネントを別のファイルにインポートし、それをAppModuleにインポートします。これを使用するか、直接インポートできます。

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

ステップ2

アイコンフォントをindex.htmlにロードします。

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

私の場合、書いたアイコン名はどのアイコンにも関連付けられていません。

ここで正しい名前を確認できます： https://material.io/tools/icons/?style=baseline

0
Francesco Ambrosini

アプリにインポートする前に、最初はhammerJsのインストールについて誰も話していないことに気付きました。同様に、最初にhammerJsをインポートする必要がある同様の問題がある場合は、インストールにNPM、Yarn、またはgoogle CDNのいずれかを使用できます。この回答は、NPMまたはYarnを使用したインストール用です。

NPM

npm install --save hammerjs

糸

yarn add hammerjs

インストール後、アプリのエントリポイント（src/main.tsなど）にインポートします。

import 'hammerjs';

Google CDNを使用する場合は、Angularの資料を参照してください。詳細については、 https://material.angular.io/guide/getting-started

0
T.M

アイコンが表示されない問題に遭遇しました。 Basavaraj Bhusaniによって提供された手順に従いましたが、まだ機能しませんでした。

私の問題は、私のscssにtext-transform: uppercaseがあり、それがアイコンにコンテンツ「arrow_forward」を表示させるだけだったことでした。アイコンのtext-transform: noneを変更する必要がありました。そうしないと、レンダリングされません。

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

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

                    }
0
srunner

私の場合、！importantを使用してフォントを台無しにしたため、アイコンは表示されませんでした。それを取り除くとアイコンが表示されました。

0
Marc Schluper