Quiero poner una imagen dentro de un botón fabuloso en Angular2 Material. El aspecto es el aspecto si ha iniciado sesión en Google o en Gmail.
Los documentos de Angular2 Material aún no tienen nada sobre esto.
Por ejemplo, vea esta imagen: http://www.mattpaulson.com/wp-content/uploads/2014/03/gmail-zero.png
El código con el que he estado jugando (que no funciona) es:
<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>Puede usar button md-fab con un estilo adicional.
<button md-fab class="image" [style.backgroundImage]="'url(' + YOUR_IMAGE_URL + ')'"> </button>y añadir:
button { &.image { background-color: transparent; background-repeat: no-repeat; background-size: cover; background-position: center center; } }Puedes usar:
mat-icon-button Botón circular con un fondo transparente, destinado a contener un icono
<button (click)="onEditBtnClick(row)" mat-icon-button color="accent"> <mat-icon>create</mat-icon> </button>"crear" es un ícono de https://material.io/icons/ https://material.angular.io/components/component/button
src es una propiedad, no un evento
<img md-fab-image [src]="userInfo.photoUrl">