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 Button-toggle Cards Checkbox Grid-list Icon Input List Menu Progress-circle Progress-bar Tabs Radio Slide-toggle Slider Toolbar Tooltip

Buttons

Angular Material 2 buttons

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

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

Button-toggle

Angular Material 2 button-toggle

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

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

Cards

Angular Material 2 card

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

Checkbox

Angular Material 2 checkboxes

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

Grid-list

Angular Material 2 grid-list

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

Icon

Get the Material Icon names here.

Angular Material 2 icon

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

Input

Angular Material 2 input

<md-card>
  <md-input placeholder="Your Text"
            dividerColor="accent">
  </md-input>
</md-card>

List

Angular Material 2 list

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

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

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

Angular Material 2 menu

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

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

Progress-circle

Angular Material 2 progress-circle

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

Progress-bar

Angular Material 2 progress-bar

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

Tabs

Angular Material 2 tabs

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

Radio

Angular Material 2 radios

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

Slide-toggle

Angular Material 2 slide-toggle

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

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

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

Slider

Angular Material 2 slider

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

Toolbar

Angular Material 2 toolbar

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

Tooltip

Angular Material 2 tooltip

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

Search

🔎 Searching...