web-dev-qa-db-ja.com

mat-icon-buttonにアイコンを追加する方法

マテリアルでAngularを使用しています

 <button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>

ボタンにアイコンを追加しようとしていますが、その方法がわからず、このドキュメントが見つかりません。

https://material.angular.io/components/button/api

ドキュメントを見ると、これがあります：

enter image description here

そのボタンには次のhtmlがあります。

<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
    <img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
    <span _ngcontent-c1="">Material</span>
  </span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>

それは正しい方法ですか？

angular-material2angular5
30
Alexander Mills

<mat-icon>またはmat-buttonの中にmat-raised-buttonを追加するだけです。以下の例を参照してください。デモ目的であなたのsvgの代わりにマテリアルアイコンを使用しているわけではありません：

<button mat-button>
    <mat-icon>mic</mat-icon>
    Start Recording
</button>

または

<button mat-raised-button color="accent">
    <mat-icon>mic</mat-icon>
    Start Recording
</button>

stackblitz demo へのリンクです。

60
Faisal

必要なのは、テンプレートのボタン要素にmat-icon-buttonディレクティブを追加することだけです。ボタン要素内で、mat-iconコンポーネントで目的のアイコンを指定します。

アプリモジュールファイルにMatButtonModuleおよびMatIconModuleをインポートする必要があります。 。

Angularマテリアルボタンのサンプルページから、コードの表示ボタンを押すと、マテリアルアイコンフォントを使用する例がいくつか表示されます。

<button mat-icon-button>
  <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>

あなたの場合、使用

<mat-icon>thumb_up</mat-icon>

https://material.angular.io/guide/getting-started の入門ガイドに従って、index.htmlにマテリアルアイコンフォントを読み込む必要があります。

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

または、グローバルstyles.scssにインポートします。

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

言及したように、任意のアイコンフォントをmat-iconコンポーネントで使用できます。

11
Jason Schroder

App.module.tsに追加

「@ angular/material/icon」から{MatIconModule}をインポートします。

グローバルindex.htmlにリンクします。

6
Alexandr Bulgakov

私の好みは、inline属性を利用することです。これにより、ボタンのサイズに合わせてアイコンが正しくスケーリングされます。

    <button mat-button>
      <mat-icon inline=true>local_movies</mat-icon>
      Movies
    </button>

    <!-- Link button -->
    <a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>

これをstyles.cssに追加して：

  • ボタン内のアイコンの垂直方向の配置の問題を解決します
  • 素材アイコンのフォントは、ボタンのテキストと比べて常に少し小さすぎます
button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
  vertical-align: top;
  font-size: 1.25em;
}
4
rynop

上記のCSSは、SASSで次のように記述できます（実際には、button.mat-buttonだけでなく、すべてのボタンタイプが含まれます）

button,
a {
    &.mat-button,
    &.mat-raised-button,
    &.mat-flat-button,
    &.mat-stroked-button {
        .mat-icon {
            vertical-align: top;
            font-size: 1.25em;
        }
    }
}
0
Remco Nonhebel

マテリアルアイコンはマテリアルアイコンフォントを使用し、フォントはページに含める必要があります。

Google Web FontsのCDNは次のとおりです。

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