michael.component.html

<div class="grid-list">
  <mat-card>
    <mat-card-title>Basic Grid List</mat-card-title>
    <mat-card-content class="basic-list">
    <mat-grid-list cols="4" [rowHeight]="basicRowHeight">
      <mat-grid-tile> One </mat-grid-tile>
      <mat-grid-tile> Two </mat-grid-tile>
      <mat-grid-tile> Three </mat-grid-tile>
      <mat-grid-tile> Four </mat-grid-tile>
    </mat-grid-list>
    </mat-card-content>
  </mat-card>
  <mat-card>
    <mat-card-title>Grid List with Header</mat-card-title>
    <mat-card-content>
      <mat-grid-list cols="3" rowHeight="200px">
        <mat-grid-tile *ngFor="let dog of dogs" style="background:gray">
        <mat-grid-tile-header>
          <mat-icon mat-grid-avatar>info_outline</mat-icon>
          {{dog.name}}
        </mat-grid-tile-header>
        </mat-grid-tile>
      </mat-grid-list>
    </mat-card-content>
  </mat-card>
  <mat-card>
    <mat-card-title>Grid List with Footer</mat-card-title>
    <mat-card-content>
      <mat-grid-list cols="3" rowHeight="200px">
        <mat-grid-tile *ngFor="let dog of dogs">
          <img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png" />
          <mat-grid-tile-footer>
            <h3 mat-line>
              {{dog.name}}
            </h3>
            <span mat-line>Human: {{dog.human}}</span>
            <mat-icon>star_border</mat-icon>
          </mat-grid-tile-footer>
        </mat-grid-tile>
      </mat-grid-list>
    </mat-card-content>
  </mat-card>
</div>
<div class="button-row wrapper">
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
  <button mat-fab>
    <mat-icon aria-label="Example icon-button with a heart icon">favourite</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>