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>

Continue reading...