Buttons
<div>
  <md-content>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
      <md-button>{{title1}}</md-button>
      <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
      <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
      <md-button class="md-warn">{{title4}}</md-button>
      <div class="label">Flat</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
      <md-button class="md-raised">Button</md-button>
      <md-button class="md-raised md-primary">Primary</md-button>
      <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
      <md-button class="md-raised md-warn">Warn</md-button>
      <div class="label">Raised</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <md-button class="md-fab" aria-label="Eat cake">
            <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
        </md-button>

        <md-button class="md-fab md-primary" aria-label="Use Android">
          <md-icon md-svg-src="img/icons/android.svg"></md-icon>
        </md-button>

        <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
            <md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
        </md-button>

        <md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
            <md-icon md-svg-src="img/icons/ic_people_24px.svg"></md-icon>
        </md-button>

        <md-button class="md-fab md-mini" aria-label="Eat cake">
            <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
        </md-button>

        <md-button class="md-fab md-mini md-primary" aria-label="Use Android">
          <md-icon md-svg-src="img/icons/android.svg" style="color: greenyellow;"></md-icon>
        </md-button>
      <div class="label">FAB</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
        <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>

        <md-button>Default Button</md-button>
      <div class="label">Link vs. Button</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
      <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
      <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
      <md-button class="md-accent">Accent</md-button>
      <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
      <div class="label">Themed</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
      <md-button class="md-icon-button md-primary" aria-label="Settings">
        <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
      </md-button>
      <md-button class="md-icon-button md-accent" aria-label="Favorite">
        <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
      </md-button>
      <md-button class="md-icon-button" aria-label="More">
        <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
      </md-button>
      <md-button href="http://google.com"
                 title="Launch Google.com in new window"
                 target="_blank"
                 ng-disabled="true"
                 aria-label="Google.com"
                 class="md-icon-button launch" >
        <md-icon md-svg-icon="img/icons/launch.svg"></md-icon>
      </md-button>
      <div class="label">Icon Button</div>
    </section>
  </md-content>
</div>

CHECKBOXES
<div>
    <fieldset class="standard">
      <legend>Using &lt;ng-model&gt;</legend>
      <div layout-wrap layout-gt-sm="row" >
        <div flex-gt-sm="50">
          <md-checkbox ng-model="data.cb1" class="md-primary" aria-label="Checkbox 1">
            Checkbox 1: {{ data.cb1 }}
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <div>
            <md-checkbox
              ng-model="data.cb2"
              aria-label="Checkbox 2"
              ng-true-value="'yup'"
              ng-false-value="'nope'"
              class="md-warn md-align-top-left" flex>
            Checkbox 2 (md-warn)  <br/>
            <span class="ipsum">
              Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
              Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
              sit amet dapibus tortor ligula non nibh.
            </span>
            <br/>
            {{ data.cb2 }}
          </md-checkbox>
          </div>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox ng-disabled="true" aria-label="Disabled checkbox" ng-model="data.cb3">
            Checkbox: Disabled
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox ng-disabled="true" aria-label="Disabled checked checkbox" ng-model="data.cb4" ng-init="data.cb4=true">
            Checkbox: Disabled, Checked
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox md-no-ink aria-label="Checkbox No Ink" ng-model="data.cb5" class="md-primary">
            Checkbox (md-primary): No Ink
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox md-indeterminate
              aria-label="Checkbox Indeterminate" class="md-primary">
            Checkbox: Indeterminate
          </md-checkbox>
        </div>
        <div flex-gt-sm="50">
          <md-checkbox md-indeterminate aria-label="Checkbox Disabled Indeterminate"
              ng-disabled="true" class="md-primary">
            Checkbox: Disabled, Indeterminate
          </md-checkbox>
        </div>
      </div>
    </fieldset>

  </div>
  
  
  
  
  Input
  <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
    <div>
      <md-input-container class="md-primary">
        <label>Title</label>
        <input ng-model="user.title">
      </md-input-container>

      <md-input-container class="md-warn">
        <label>Email</label>
        <input ng-model="user.email" type="email">
      </md-input-container>
    </div>
  </md-content>
  
  
  
  SWITCH
  <md-switch class="md-primary" ng-model="data.cb1" aria-label="Switch 1">
    Switch 1: {{ data.cb1 }}
  </md-switch>