Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 290
curtybear Avatar asked Mar 11 '17 00:03

curtybear


People also ask

How do I add an image to a mat Tab label?

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/> .

What is mat icon button?

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.


2 Answers

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;
  }
}
like image 94
Jan Avatar answered Dec 06 '22 21:12

Jan


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

like image 23
argoo Avatar answered Dec 06 '22 22:12

argoo