CODEWITHSUNDEEP
angularangular-material
curtybear
curtybear

Reputation: 1548

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>

Upvotes: 11

Views: 23025

Answers (6)

bedkan
bedkan

Reputation: 39

With mat-mini-fab (tested for @angular/material 14)

<button
  mat-mini-fab
  [style.background-image]="'url(' + image_url + ')'"
  class="image"
>
</button>

and image class styles

button {
  &.image {
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
}

Upvotes: 0

Otpidus
Otpidus

Reputation: 519

Something like this might work as well

<button mat-mini-fab 
    style="background: url('../assets/logo.png') center no-repeat>
</button>

Upvotes: 0

argoo
argoo

Reputation: 1476

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

Upvotes: 8

Jan
Jan

Reputation: 330

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;
  }
}

Upvotes: 10

Aravind
Aravind

Reputation: 41571

I would suggest with material design md-icon as below, which can be played with material icons

<button md-raised-button><md-icon>home</md-icon>Some Button</button>

<button md-fab><md-icon>home</md-icon></button>

<button md-mini-fab><md-icon>list</md-icon></button>

Any phrase linked inside <md-icon> </md-icon> is assumed be code for the icon.

Note : The commonly used bootstrap glyphicons, font awesome are in progress.

LIVE DEMO

Upvotes: 1

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37403

src is property not an event 

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

Upvotes: 1

Related Questions