如何在Angular2材料Fab按钮的内部放置图像？

Question

我想在Angular2材料中放入Fab按钮的图像。 外观是如果您在Google上登录或Gmail。

angular2材料文档尚无任何内容。

例如，请参见此图像：

Http：//www.mattpaulson.com/wp-content/uploads/2014/03/gmail-zero.png

我一直在玩（不起作用）的代码是：

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

没有理想的hack

    <button md-fab md-button
        style="overflow:hidden;top:1rem;"
        type="button">
        <img [src]="userInfo.photoUrl" style="max-width:100%">
    </button>

您可以使用一些其他样式。

Answer 1

添加：

<button md-fab class="image" 
  [style.backgroundImage]="'url(' + YOUR_IMAGE_URL + ')'">
</button>

您可以使用：

mat-icon-button

Answer 2

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

“创建”是来自

https：//material.io/icons/的图标 https：//material.angular.io/components/component/button

<button (click)="onEditBtnClick(row)" mat-icon-button color="accent"> 
    <mat-icon>create</mat-icon>
</button>

是属性不是事件 src

Answer 3

我会用以下材料设计MD-icon建议，可以使用材料图标进行播放。

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

在in内部链接的任何短语被认为是图标的代码。 注：常用的引导镜头字形，字体很棒。 livedemo

Answer 4

像这样的东西可能也很好

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

与Mat-Mini-fab

<md-icon> </md-icon> 和图像类样式

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

Answer 5