Angular Material 2 Quick Reference

A reference for the Material Design components currently available in the Angular Material 2 project. Check out this post for a getting-started guide. Angular Material 2 is in active development, so this post will be updated over time to reflect changes or additions:

Jump to:

Buttons

Angular Material 2 buttons

<mat-card>
  <button mat-button>All</button>
  <button mat-raised-button>Of</button>
  <button mat-raised-button color="primary">The</button>
  <button mat-raised-button color="accent">Buttons</button>
</mat-card>

<mat-card>
  <button mat-fab color="primary">
    <mat-icon>send</mat-icon>
  </button>
  <button mat-mini-fab color="accent">
      <mat-icon>send</mat-icon>
  </button>
</mat-card>

Button-toggle

Angular Material 2 button-toggle

<mat-card>
  <mat-button-toggle-group>
    <mat-button-toggle>Small</mat-button-toggle>
    <mat-button-toggle>Medium</mat-button-toggle>
    <mat-button-toggle>Large</mat-button-toggle>
    <mat-button-toggle disabled>X-Large</mat-button-toggle>
  </mat-button-toggle-group>
</mat-card>

<mat-card>
  <mat-button-toggle-group>
    <mat-button-toggle value="good"><mat-icon>thumb_down</mat-icon></mat-button-toggle>
    <mat-button-toggle value="bad"><mat-icon>thumb_up</mat-icon></mat-button-toggle>
  </mat-button-toggle-group>
</mat-card>

Cards

Angular Material 2 card

<mat-card>
  <mat-card-header>
    <img mat-card-avatar src="https://source.unsplash.com/random/200x200">
    <mat-card-title>Cards are the best</mat-card-title>
    <mat-card-subtitle>Really, they are!</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://source.unsplash.com/random/800x600">
  <mat-card-content>
    <p>Something pretty...</p>
  </mat-card-content>
</mat-card>

Checkbox

Angular Material 2 checkboxes

<mat-card>
  <mat-checkbox indeterminate="isIndeterminate">
    Inderterminate
  </mat-checkbox>
  <mat-checkbox [checked]="isChecked">
    Checked already
  </mat-checkbox>
  <mat-checkbox>
    Unchecked
  </mat-checkbox>
</mat-card>

Grid-list

Angular Material 2 grid-list

<mat-card>
  <mat-grid-list cols="3">
   <mat-grid-tile [style.border-right]="'1px dashed #ddd'">
     John
   </mat-grid-tile>
   <mat-grid-tile [style.border-right]="'1px dashed #ddd'">
     Paul
   </mat-grid-tile>
   <mat-grid-tile>
     Ringo
   </mat-grid-tile>
  </mat-grid-list>
</mat-card>

Icon

Get the Material Icon names here.

Angular Material 2 icon

<mat-card>
  <mat-icon>translate</mat-icon>
  <mat-icon>hearing</mat-icon>
  <mat-icon>audiotrack</mat-icon>
  <mat-icon>mail</mat-icon>
  <mat-icon>adjust</mat-icon>
  <mat-icon>dock</mat-icon>
  <mat-icon>camera</mat-icon>
</mat-card>

Input

Angular Material 2 input

<mat-card>
  <mat-form-field>
    <input mdInput placeholder="Your Text" dividerColor="accent">
  </mat-form-field>
</mat-card>

List

Angular Material 2 list

<mat-card>
  <mat-list>
    <mat-list-item>
      <img mat-list-avatar src="..." alt="Desc 1">
      <h3 mat-line>Title 1</h3>
      <p mat-line>
        <span>An awesome description</span>
      </p>
    </mat-list-item>

    <mat-list-item>
      <img mat-list-avatar src="..." alt="Desc 2">
      <h3 mat-line>Title 2</h3>
      <p mat-line>
        <span>Another awesome description</span>
      </p>
    </mat-list-item>

    <mat-list-item>
      <img mat-list-avatar src="..." alt="Desc 3">
      <h3 mat-line>Title 3</h3>
      <p mat-line>
        <span>Yet another awesome description</span>
      </p>
    </mat-list-item>
  </mat-list>
</mat-card>

Angular Material 2 menu

<mat-card>
  <button mat-raised-button [mat-menu-trigger-for]="menu">
     Menu
  </button>

  <mat-menu #menu="mdMenu">
      <button mat-menu-item>Profile</button>
      <button mat-menu-item>Settings</button>
      <button mat-menu-item>Account</button>
      <button mat-menu-item>Sign Out</button>
  </mat-menu>
</mat-card>

Progress-circle

Angular Material 2 progress-circle

<mat-card>
  <mat-grid-list cols="3">
   <mat-grid-tile>
     <mat-progress-circle mode="determinate" [value]="65"></mat-progress-circle>
   </mat-grid-tile>
   <mat-grid-tile>
     <mat-progress-circle mode="indeterminate"></mat-progress-circle>
   </mat-grid-tile>
   <mat-grid-tile>
     <mat-progress-circle mode="indeterminate" color="accent"></mat-progress-circle>
   </mat-grid-tile>
  </mat-grid-list>
</mat-card>

Progress-bar

Angular Material 2 progress-bar

<mat-card>
  <p>
    <mat-progress-bar mode="indeterminate">
    </mat-progress-bar>
  </p>
  <p>
    <mat-progress-bar mode="buffer" value="34" bufferValue="50">
    </mat-progress-bar>
  </p>
  <p>
    <mat-progress-bar mode="query">
    </mat-progress-bar>
  </p>
  <p>
    <mat-progress-bar mode="determinate" value="65" color="accent">
    </mat-progress-bar>
  </p>
</mat-card>

Tabs

Angular Material 2 tabs

<mat-card>
  <mat-tab-group [selectedIndex]="2">
    <mat-tab label="Breakfast">
      <h3>Breakfast option</h3>
      <p>Toast /w peanut butter</p>
    </mat-tab>
    <mat-tab label="Lunch">
      <h3>Lunch option</h3>
      <p>Club sandwich</p>
    </mat-tab>
    <mat-tab label="Dinner">
      <h3>Dinner option</h3>
      <p>Lasagna</p>
    </mat-tab>
  </mat-tab-group>
</mat-card>

Radio

Angular Material 2 radios

<mat-card>
  <mat-radio-group>
    <mat-radio-button value="bacon">
      Bacon
    </mat-radio-button>
    <mat-radio-button value="ham">
      Ham
    </mat-radio-button>
    <mat-radio-button value="chicken" [checked]="isChecked">
      Chicken
    </mat-radio-button>
  </mat-radio-group>
</mat-card>

Slide-toggle

Angular Material 2 slide-toggle

<mat-card>
  <mat-slide-toggle>
    Bacon
  </mat-slide-toggle>

  <mat-slide-toggle disabled>
    Ham
  </mat-slide-toggle>

  <mat-slide-toggle [checked]="isChecked">
    Chicken
  </mat-slide-toggle>
</mat-card>

Slider

Angular Material 2 slider

<mat-card>
  <mat-slider></mat-slider>
  <mat-slider disabled></mat-slider>
  <mat-slider value="75"></mat-slider>
</mat-card>

Toolbar

Angular Material 2 toolbar

<mat-toolbar color="accent">
  <span>Logo</span>
  <span>Welcome</span>
  <button mat-raised-button color="primary">
    Menu
  </button>
</mat-toolbar>

Tooltip

Angular Material 2 tooltip

<mat-card>
  <button mat-raised-button
          mat-tooltip="E.T. phone home"
          tooltip-position="below">
    <mat-icon>home</mat-icon>
  </button>
</mat-card>

  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...