Angular Material2

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



How Add Icon Mat Icon Button



解決：

追加するだけです中身マットボタンまたはマット上げボタン。以下の例を参照してください。デモの目的で、svgの代わりにマテリアルアイコンを使用していることに注意してください。

マイク録音開始
  また  

 
 
マイク録音開始
ここにへのリンクがあります stackblitz demo 。
  
あなたがする必要があるのは追加することです マットアイコンボタン テンプレートのbutton要素へのディレクティブ。ボタン要素内で、目的のアイコンを マットアイコン 成分。
 
 
 
インポートする必要があります MatButtonModule と MatIconModule アプリモジュールファイル内。
 
Angular Materialボタンのサンプルページから、コードの表示ボタンを押すと、マテリアルアイコンフォントを使用するいくつかの例が表示されます。
 
お気に入り
あなたの場合、
 
 
 
いいね
https://material.angular.io/guide/getting-startedのスタートガイドに従って、index.htmlにマテリアルアイコンフォントをロードする必要があります。
 
  
または、グローバルstyles.scssにインポートします。
 
@import url（ 'https://fonts.googleapis.com/icon?family=Material+Icons'）;
前述のように、mat-iconコンポーネントでは任意のアイコンフォントを使用できます。
  
app.module.tsに追加します
  
 
'@ angular / material / icon'から{MatIconModule}をインポートします。
 
 
＆グローバルindex.htmlにリンクします。