CODEWITHSUNDEEP
angularangular-material2
HirenParekh
HirenParekh

Reputation: 3735

How to make a flat icon button in angular material 2?

I want an icon button the same as the one on the angular material documentation site.

You can check the view source and plunker button in the below image. I don't know if there is any directive for it. In the documentation, they have shown icons with md-fab and md-mini-fab attributes.

I want an icon button the same as the View source code and Plunker button of the below image.

Angular Material Docs > Button > Examples

Upvotes: 2

Views: 6339

Answers (1)

Edric
Edric

Reputation: 26801

Use the md-icon-button attribute on your button element to get an icon button:

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

NOTE: If you use Material Icons by Google, make sure you import the stylesheet in your index.html or in your styles.css as material2 will not supply it by default. (You may alternatively use other icons such as SVG icons or CSS)

Add the following code for importing the Material Icons stylesheet to your index.html (as stated above):

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

Or via CSS (in styles.css):

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

More information:

Upvotes: 4

Related Questions