AngularMaterialアイコンが機能しない

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

アプリモジュール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>

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

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

何か提案がありますか？

マテリアルアイコンのCSSスタイルシートを追加してください！

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

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

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

Angular 6+の場合：

1. npmはこれをインストールします： npm install material-design-icons

2. スタイルをangular.jsonに追加します。

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

SASSを使用している場合は、次の行をメイン.scssファイルに追加するだけで済みます。

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

グーグルからアイコンをフェッチすることを避けたい場合は、マテリアルアイコンガイドで説明されているようにアイコンをセルフホストすることもできます。

Webフォントをセルフホストしたい場合は、追加の設定が必要です。アイコンフォントをhttps://example.com/material-icons.woffなどの場所でホストし 、次のCSSルールを追加します。

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

さらに、フォントを正しくレンダリングするには、アイコンをレンダリングするためのCSSルールを宣言する必要があります。これらのルールは通常、Google Webフォントスタイルシートの一部として提供されますが、フォントをセルフホストする場合は、プロジェクトに手動で含める必要があります。

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

私の場合、フォントファミリーを上書きするスタイルが適用されていました。そこで、次のように明示的にフォントファミリースタイルを追加しました。

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

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

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

完全な解決策は次のとおりです。

第一歩

あなたは、インポートする必要が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">

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

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

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

アイコンが表示されないという問題が発生しました。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';

                    }

ハンマーJをアプリにインポートする前に、最初は誰もhammerJのインストールについて話していなかったことに気づきました。同様の問題を抱えている人は、最初にhammerJをインポートする必要があります。インストールには、NPM、Yarn、またはgoogleCDNのいずれかを使用できます。この回答は、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

間違ったアイコン名：一部のマテリアルアイコン名が間違っています。

例：マテリアルアイコンはfilter_altを提供します

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

しかし、それは表示されます😟

修正：目標到達プロセスタイプのアイコンにfilter_list_alt を使用する必要があります。

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

既存のAngularMaterialスタイリングまたはアイコンに何らかの影響を与えるその他のスタイリングを上書きした場合、問題が発生する可能性があります。アイコンコードをスタイリングとテストの外に移動します。

私にとって、それはフォントバリアントでした：スモールキャピタル。

だから私はそれを子要素に移動しました。以下はAngularMaterialグリッドの一部です。

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

index.htmlに以下を追加するだけです。

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