How to use a font-awesome icon with Angular Material button?

Asked

Viewed 1,193 times

4

In the Documentation of Material Angular there are examples of using icons on buttons, through an SVG icon.

Example:

  <md-button class="md-icon-button md-primary" aria-label="Settings">
    <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
  </md-button>

But I would like to know if there is any way to use font icons as well. In my case I am using the Font Awesome.

How to do this?

angularjs angular-material font-awesome

1 answer

3


I don’t remember seeing anything about this in the documentation, but to use a font as an icon, you need to use the directive md-icon with the property md-font-icon containing the class referring to the icon (in your case the Font Awesome icons).

Behold:

<md-button class="md-icon-button">
    <md-icon md-font-icon="fa fa-edit"></md-icon>
</md-button>

Browser other questions tagged angularjs angular-material font-awesome

You are not signed in. Login or sign up in order to post.