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>
<button md-fab md-button
style="overflow:hidden;top:1rem;"
type="button">
<img [src]="userInfo.photoUrl" style="max-width:100%">
</button>
You can use button md-fab with some additional styling.
<button md-fab class="image"
[style.backgroundImage]="'url(' + YOUR_IMAGE_URL + ')'">
</button>
and add:
button {
&.image {
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
}
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
src is property not an event
<img md-fab-image [src]="userInfo.photoUrl">