2017-05-18 14 views
1

angular material documentation siteのアイコンボタンと同じアイコンボタンが必要です。角度素材2でフラットアイコンボタンを作成する方法は?

あなたは下の画像でビューソースplunkerボタンをチェックすることができます。私はそれに指示があるかどうかわかりません。ドキュメントでは、md-fabmd-mini-fab属性のアイコンが表示されています。

以下の画像のView source codePlunkerボタンと同じアイコンボタンが必要です。

Angular Material Docs > Button > Examples

答えて

4

アイコンボタンを得るためにあなたのbutton要素にmd-icon-button属性を使用します。

<button md-icon-button mdTooltip="Check me"> 
    <md-icon>check</md-icon> 
</button> 

注:をあなたがMaterial Icons by Googleを使用する場合は、必ずあなたのindex.htmlにまたはでスタイルシートをインポートしますstyles.cssはmaterial2としてデフォルトでは供給されません。 (あなたが代わりに、このようなSVG iconsCSSなどの他のアイコンを使用する場合があります)

(前述したように)あなたのindex.htmlにマテリアルアイコンスタイルシートをインポートするための次のコードを追加します。

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

またはCSSを経由して(中styles.css):

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

詳細情報

関連する問題