<mat-card>
  <mat-card-title>Raised Buttons</mat-card-title>
  <mat-card-content>
    <button mat-raised-button color="default">Default</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <a mat-raised-button href="https://github.com/stbui/angular-material-app" target="blank">Link Button</a>
    <button mat-raised-button disabled>Disabled</button>
    <br><br>
    <button mat-raised-button><mat-icon>refresh</mat-icon> 刷新</button>
    <button mat-raised-button><mat-icon>keyboard_arrow_left</mat-icon> 返回</button>
    <button mat-raised-button><mat-icon>close</mat-icon> 关闭</button>
    <button mat-raised-button><mat-icon>add</mat-icon> 添加</button>
    <button mat-raised-button><mat-icon>edit</mat-icon> 编辑</button>
    <button mat-raised-button><mat-icon>delete</mat-icon> 删除</button>
    <button mat-raised-button><mat-icon>file_download</mat-icon> 下载</button>
    <button mat-raised-button><mat-icon>print</mat-icon> 打印</button>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Flat Buttons</mat-card-title>
  <mat-card-content>
    <button mat-button>Default</button>
    <button mat-button color="primary">Primary</button>
    <button mat-button color="accent">Accent</button>
    <button mat-button color="warn">Warn</button>
    <a mat-button href="https://github.com/stbui/angular-material-appp" target="blank">Link Button</a>
    <button mat-button disabled>Disabled</button>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Fab Buttons</mat-card-title>
  <mat-card-content>
    <button mat-fab><mat-icon>cake</mat-icon></button>
    <button mat-mini-fab><mat-icon>cake</mat-icon></button>
    <button mat-fab color="primary"><mat-icon>android</mat-icon></button>
    <button mat-mini-fab color="primary"><mat-icon>android</mat-icon></button>
    <button mat-fab color="accent"><mat-icon>comment</mat-icon></button>
    <button mat-mini-fab color="accent"><mat-icon>comment</mat-icon></button>
    <button mat-mini-fab color="warn"><mat-icon>lock</mat-icon></button>
    <button mat-mini-fab color="warn" disabled="true"><mat-icon>lock</mat-icon></button>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Icon Buttons</mat-card-title>
  <mat-card-content>
    <button mat-icon-button><mat-icon>menu</mat-icon></button>
    <button mat-icon-button color="primary"><mat-icon>favorite</mat-icon></button>
    <button mat-icon-button color="accent"><mat-icon>more_vert</mat-icon></button>
    <button mat-icon-button color="warn"><mat-icon>build</mat-icon></button>
    <button mat-icon-button disabled="true"><mat-icon>lock</mat-icon></button>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Button Toggle</mat-card-title>
  <mat-card-content>
    <mat-button-toggle-group name="alignment">
      <mat-button-toggle value="left"><mat-icon>format_align_left</mat-icon></mat-button-toggle>
      <mat-button-toggle value="center"><mat-icon>format_align_center</mat-icon></mat-button-toggle>
      <mat-button-toggle value="right"><mat-icon>format_align_right</mat-icon></mat-button-toggle>
      <mat-button-toggle value="justify"><mat-icon>format_align_justify</mat-icon></mat-button-toggle>
    </mat-button-toggle-group>
    <mat-button-toggle-group multiple>
      <mat-button-toggle>Flour</mat-button-toggle>
      <mat-button-toggle>Eggs</mat-button-toggle>
      <mat-button-toggle>Sugar</mat-button-toggle>
      <mat-button-toggle>Milk</mat-button-toggle>
    </mat-button-toggle-group>
  </mat-card-content>
</mat-card>

:host {
  display: block;
}

mat-card {
  margin: 20px;
}