[SOLVED] How do you put an image inside of an Angular2 Material fab button?

How do you put an image inside of an Angular2 Material fab button?

I want to put an image inside of a fab button in Angular2 Material. The look is the look if you are logged in on Google, or in Gmail.

Angular2 Material docs don't have anything yet on this.

For example, see this image: http://www.mattpaulson.com/wp-content/uploads/2014/03/gmail-zero.png

Code I've been playing with (that doesn't work) is:

    <button md-fab 
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
        <div class="md-ripple-container"></div>
    </button>

    <button md-fab 
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

    <button md-fab md-fab-image
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button
        type="button">
        <img [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button
        md-fab-image
        type="button">
        <img  [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button md-fab-image
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button md-fab-image
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

Non-ideal hack

    <button md-fab md-button
        style="overflow:hidden;top:1rem;"
        type="button">
        <img [src]="userInfo.photoUrl" style="max-width:100%">
    </button>

Solution

You can use:

mat-icon-button Circular button with a transparent background, meant to contain an icon

<button (click)="onEditBtnClick(row)" mat-icon-button color="accent"> 
    <mat-icon>create</mat-icon>
</button>

"create" is an icon from https://material.io/icons/ https://material.angular.io/components/component/button