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>
According to the Angular docs: For more complex labels, add a template with the mat-tab-label directive inside the mat-tab. So you can place your <img> or whatever you want into the template <ng-template mat-tab-label/> .
Angular directing <mat-button> is used to create a button with content styling and animations. Angular content buttons are native <button> or elements enhanced with styling and ink ripples. Native <button> and <a> elements are used to provide the accessible experience for users.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With