AngularJS MD UI Tester

angularjs-md-ui-tester.markdown

AngularJS MD UI Tester

Test MD themes

A Pen by Patryk Golabek on CodePen.

License.

index.html

<div ng-app="mdTesterApp" ng-controller="MainController" md-theme="{{theme}}" md-theme-watch="true">
    <div class="buttondemoBasicUsage">
        <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
            <md-button ng-click="changeTheme('default')">Default</md-button>
            <md-button ng-click="changeTheme('dark')">Dark</md-button>
            <md-button ng-click="changeTheme('icuweb')">CMIS</md-button>
            <md-button ng-click="changeTheme('customPallet')">custom Pallet</md-button>
            <md-button ng-click="changeTheme('blue')">Blue</md-button>
            <md-button ng-click="changeTheme('yellow')">Yellow</md-button>
            <md-button ng-click="changeTheme('orange')">Orange</md-button>
            <md-button ng-click="changeTheme('teal')">teal</md-button>
            <md-button ng-click="changeTheme('purple')">purple</md-button>
            <md-button ng-click="changeTheme('lime')">lime</md-button>
            <md-button ng-click="changeTheme('amber')">amber</md-button>
            <md-button ng-click="changeTheme('brown')">brown</md-button>
            <md-button ng-click="changeTheme('grey')">grey</md-button>
            <div class="label">Primary Colour</div>
        </section>
    </div>

    <div ng-cloak="" class="toolbardemoBasicUsage">

        <md-content>

    <br>

    <md-toolbar class="md-hue-2">
      <div class="md-toolbar-tools">
        <md-button class="md-icon-button" aria-label="Settings" ng-disabled="true">
          <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
        </md-button>

        <h2 flex="" md-truncate="">Toolbar with Disabled/Enabled Icon Buttons</h2>

        <md-button class="md-icon-button" aria-label="Favorite">
          <md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></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>
      </div>
    </md-toolbar>

    <br>

    <md-toolbar>
      <div class="md-toolbar-tools">
        <md-button aria-label="Go Back">
          Go Back
        </md-button>

        <md-truncate style="position: absolute; left: 90px; right: 170px; top: 13px; bottom: 13px;">Toolbar with Standard Buttons</md-truncate>

        <span flex=""></span>
        <md-button class="md-raised" aria-label="Learn More">
          Learn More
        </md-button>
        <md-button class="md-fab md-mini" aria-label="Favorite">
          <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
        </md-button>
      </div>
    </md-toolbar>

    <br>

    <md-toolbar class="md-tall md-accent">
      <h2 class="md-toolbar-tools">
        <span>Toolbar: tall (md-accent)</span>
      </h2>
    </md-toolbar>

    <br>

    <md-toolbar class="md-tall md-warn md-hue-3">
      <span flex=""></span>
      <h2 class="md-toolbar-tools">
        <span class="md-flex">Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</span>
      </h2>
    </md-toolbar>
  </md-content>
    </div>


    <div class="buttondemoBasicUsage">
        <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>

    <div layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage">

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

                <md-input-container>
                    <label>Email</label>
                    <input ng-model="user.email" type="email">
                </md-input-container>
            </div>
        </md-content>

        <md-content layout-padding="">
            <div>
                <form name="userForm">

                    <div layout-gt-xs="row">
                        <md-input-container class="md-block" flex-gt-xs="">
                            <label>Company (Disabled)</label>
                            <input ng-model="user.company" disabled="">
                        </md-input-container>

                        <md-input-container>
                            <label>Enter date</label>
                            <md-datepicker ng-model="user.submissionDate"></md-datepicker>
                        </md-input-container>
                    </div>

                    <div layout-gt-sm="row">
                        <md-input-container class="md-block" flex-gt-sm="">
                            <label>First name</label>
                            <input ng-model="user.firstName">
                        </md-input-container>

                        <md-input-container class="md-block" flex-gt-sm="">
                            <label>Long Last Name That Will Be Truncated And 3 Dots (Ellipsis) Will Appear At The
                                End</label>
                            <input ng-model="theMax">
                        </md-input-container>
                    </div>

                    <md-input-container class="md-block">
                        <label>Address</label>
                        <input ng-model="user.address">
                    </md-input-container>

                    <md-input-container md-no-float="" class="md-block">
                        <input ng-model="user.address2" placeholder="Address 2">
                    </md-input-container>

                    <div layout-gt-sm="row">
                        <md-input-container class="md-block" flex-gt-sm="">
                            <label>City</label>
                            <input ng-model="user.city">
                        </md-input-container>

                        <md-input-container class="md-block" flex-gt-sm="">
                            <label>State</label>
                            <md-select ng-model="user.state">
                                <md-option ng-repeat="state in states" value="{{state.abbrev}}">
                                    {{state.abbrev}}
                                </md-option>
                            </md-select>
                        </md-input-container>

                        <md-input-container class="md-block" flex-gt-sm="">
                            <label>Postal Code</label>
                            <input name="postalCode" ng-model="user.postalCode" placeholder="12345" required=""
                                   ng-pattern="/^[0-9]{5}$/" md-maxlength="5">

                            <div ng-messages="userForm.postalCode.$error" role="alert" multiple="">
                                <div ng-message="required" class="my-message">You must supply a postal code.</div>
                                <div ng-message="pattern" class="my-message">That doesn't look like a valid postal
                                    code.
                                </div>
                                <div ng-message="md-maxlength" class="my-message">
                                    Don't use the long version silly...we don't need to be that specific...
                                </div>
                            </div>
                        </md-input-container>
                    </div>

                    <md-input-container class="md-block">
                        <label>Biography</label>
                        <textarea ng-model="user.biography" md-maxlength="150" rows="5"
                                  md-select-on-focus=""></textarea>
                    </md-input-container>


                </form>
            </div>
        </md-content>

    </div>

    <div layout="column" ng-cloak="" class="inputdemoErrors">

        <md-content layout-padding="">
            <form name="projectForm">

                <md-input-container class="md-block">
                    <label>Description</label>
                    <input md-maxlength="30" required="" md-no-asterisk="" name="description"
                           ng-model="project.description">

                    <div ng-messages="projectForm.description.$error">
                        <div ng-message="required">This is required.</div>
                        <div ng-message="md-maxlength">The description must be less than 30 characters long.</div>
                    </div>
                </md-input-container>

                <div layout="row">
                    <md-input-container flex="50">
                        <label>Client Name</label>
                        <input required="" name="clientName" ng-model="project.clientName">

                        <div ng-messages="projectForm.clientName.$error">
                            <div ng-message="required">This is required.</div>
                        </div>
                    </md-input-container>

                    <md-input-container flex="50">
                        <label>Project Type</label>
                        <md-select name="type" ng-model="project.type" required="">
                            <md-option value="app">Application</md-option>
                            <md-option value="web">Website</md-option>
                        </md-select>
                    </md-input-container>
                </div>

                <md-input-container class="md-block">
                    <label>Client Email</label>
                    <input required="" type="email" name="clientEmail" ng-model="project.clientEmail" minlength="10"
                           maxlength="100" ng-pattern="/^.+@.+\..+$/">

                    <div ng-messages="projectForm.clientEmail.$error" role="alert">
                        <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                            Your email must be between 10 and 100 characters long and look like an e-mail address.
                        </div>
                    </div>
                </md-input-container>

                <md-input-container class="md-block">
                    <label>Hourly Rate (USD)</label>
                    <input required="" type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999"
                           ng-pattern="/^1234$/">

                    <div ng-messages="projectForm.rate.$error" multiple="" md-auto-hide="false">
                        <div ng-message="required">
                            You've got to charge something! You can't just <b>give away</b> a Missile Defense
                            System.
                        </div>

                        <div ng-message="min">
                            You should charge at least $800 an hour. This job is a big deal... if you mess up,
                            everyone dies!
                        </div>

                        <div ng-message="pattern">
                            You should charge exactly $1,234.
                        </div>

                        <div ng-message="max">
                            {{projectForm.rate.$viewValue | currency:"$":0}} an hour? That's a little ridiculous. I
                            doubt even Bill Clinton could afford that.
                        </div>
                    </div>
                </md-input-container>

                <md-input-container class="md-block">
                    <md-checkbox name="tos" ng-model="project.tos" required="">
                        I accept the terms of service.
                    </md-checkbox>
                    <div ng-messages="projectForm.tos.$error" multiple="" md-auto-hide="false">
                        <div ng-message="required">
                            You must accept the terms of service before you can proceed.
                        </div>
                    </div>
                </md-input-container>

                <md-input-container class="md-block">
                    <md-switch class="md-primary" name="special" ng-model="project.special" required="">
                        Enable special options.
                    </md-switch>
                    <div ng-messages="projectForm.special.$error" multiple="">
                        <div ng-message="required">
                            You must enable all special options before you can proceed.
                        </div>
                    </div>
                </md-input-container>
                <div>
                    <md-button type="submit">Submit</md-button>
                </div>
            </form>
        </md-content>

    </div>

    <md-content layout-padding="" ng-cloak="" class="datepickerdemoBasicUsage">
        <div layout-gt-xs="row">
            <div flex-gt-xs="">
                <h4>Standard date-picker</h4>
                <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
            </div>

            <div flex-gt-xs="">
                <h4>Disabled date-picker</h4>
                <md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled=""></md-datepicker>
            </div>
        </div>

        <div layout-gt-xs="row">
            <div flex-gt-xs="">
                <h4>Opening the calendar when the input is focused</h4>
                <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-open-on-focus=""></md-datepicker>
            </div>

            <div flex-gt-xs="">
                <h4>Date-picker that goes straight to the year view</h4>
                <md-datepicker ng-model="myDate" md-current-view="year" md-placeholder="Enter date"></md-datepicker>
            </div>
        </div>

    </md-content>

    <md-content layout-padding="" ng-cloak="" class="datepickerdemoValidations">
        <div layout-gt-xs="row">
            <div flex-gt-xs="">
                <h4>Date-picker with min date and max date</h4>
                <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate"
                               md-max-date="maxDate"></md-datepicker>
            </div>

            <div flex-gt-xs="">
                <h4>Only weekends are selectable</h4>
                <md-datepicker ng-model="myDate" md-placeholder="Enter date"
                               md-date-filter="onlyWeekendsPredicate"></md-datepicker>
            </div>
        </div>

        <div layout-gt-xs="row">
            <div flex-gt-xs="">
                <h4>Only weekends within given range are selectable</h4>
                <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate"
                               md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker>
            </div>

            <form name="myForm" flex-gt-xs="">
                <h4>Inside a md-input-container</h4>

                <md-input-container>
                    <label>Enter date</label>
                    <md-datepicker ng-model="myDate" name="dateField" md-min-date="minDate"
                                   md-max-date="maxDate"></md-datepicker>

                    <div ng-messages="myForm.dateField.$error">
                        <div ng-message="valid">The entered value is not a date!</div>
                        <div ng-message="required">This date is required!</div>
                        <div ng-message="mindate">Date is too early!</div>
                        <div ng-message="maxdate">Date is too late!</div>
                    </div>
                </md-input-container>
            </form>
        </div>
    </md-content>

    <div ng-cloak="" class="carddemoBasicUsage">
        <md-content class="md-padding" layout-xs="column" layout="row">
            <div flex-xs="" flex-gt-xs="50" layout="column">
                <md-card md-theme="{{ showDarkTheme ? 'dark' : 'default' }}" md-theme-watch="">
                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card with image</span>
                            <span class="md-subhead">Large</span>
                        </md-card-title-text>
                        <md-card-title-media>
                            <div class="md-media-lg card-media"></div>
                        </md-card-title-media>
                    </md-card-title>
                    <md-card-actions layout="row" layout-align="end center">
                        <md-button>Action 1</md-button>
                        <md-button>Action 2</md-button>
                    </md-card-actions>
                </md-card>
                <md-card md-theme="{{ showDarkTheme ? 'dark' : 'default' }}" md-theme-watch="">
                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card with image</span>
                            <span class="md-subhead">Extra Large</span>
                        </md-card-title-text>
                    </md-card-title>
                    <md-card-content layout="row" layout-align="space-between">
                        <div class="md-media-xl card-media"></div>

                        <md-card-actions layout="column">
                            <md-button class="md-icon-button" aria-label="Favorite">
                                <md-icon md-svg-icon="action:ic_favorite_24px"></md-icon>
                            </md-button>
                            <md-button class="md-icon-button" aria-label="Settings">
                                <md-icon md-svg-icon="navigation:ic_menu_24px"></md-icon>
                            </md-button>
                            <md-button class="md-icon-button" aria-label="Share">
                                <md-icon md-svg-icon="social:ic_share_24px"></md-icon>
                            </md-button>
                        </md-card-actions>
                    </md-card-content>
                </md-card>
            </div>
            <div flex-xs="" flex-gt-xs="50" layout="column">
                <md-card md-theme="{{ showDarkTheme ? 'dark' : 'default' }}" md-theme-watch="">
                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card with image</span>
                            <span class="md-subhead">Small</span>
                        </md-card-title-text>
                        <md-card-title-media>
                            <div class="md-media-sm card-media"></div>
                        </md-card-title-media>
                    </md-card-title>
                    <md-card-actions layout="row" layout-align="end center">
                        <md-button>Action 1</md-button>
                        <md-button>Action 2</md-button>
                    </md-card-actions>
                </md-card>
                <md-card md-theme="{{ showDarkTheme ? 'dark' : 'default' }}" md-theme-watch="">
                    <md-card-title>
                        <md-card-title-text>
                            <span class="md-headline">Card with image</span>
                            <span class="md-subhead">Medium</span>
                        </md-card-title-text>
                        <md-card-title-media>
                            <div class="md-media-md card-media"></div>
                        </md-card-title-media>
                    </md-card-title>
                    <md-card-actions layout="row" layout-align="end center">
                        <md-button>Action 1</md-button>
                        <md-button>Action 2</md-button>
                    </md-card-actions>
                </md-card>
                <div layout="" layout-padding="" layout-align="center end" style="height:200px">
                    <md-checkbox ng-model="showDarkTheme">Use 'Dark' Themed Cards</md-checkbox>
                </div>
            </div>
        </md-content>
    </div>

    <div layout="column" ng-cloak="" class="fabSpeedDialdemoBasicUsage">
        <md-content class="md-padding" layout="column">
            <p>
                You may supply a direction of <code>left</code>, <code>up</code>, <code>down</code>, or
                <code>right</code> through the <code>md-direction</code> attribute.
            </p>

            <div class="lock-size" layout="row" layout-align="center center">
                <md-fab-speed-dial md-open="isOpen" md-direction="{{selectedDirection}}" ng-class="selectedMode">
                    <md-fab-trigger>
                        <md-button aria-label="menu" class="md-fab md-warn">
                             <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
                        </md-button>
                    </md-fab-trigger>

                  <md-fab-actions>
          <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
            <md-icon md-svg-src="img/icons/twitter.svg" aria-label="Twitter"></md-icon>
          </md-button>
          <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
            <md-icon md-svg-src="img/icons/facebook.svg" aria-label="Facebook"></md-icon>
          </md-button>
          <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
            <md-icon md-svg-src="img/icons/hangout.svg" aria-label="Google Hangout"></md-icon>
          </md-button>
        </md-fab-actions>
                </md-fab-speed-dial>
            </div>

            <div layout="row" layout-align="space-around">
                <div layout="column" layout-align="start center">
                    <b>Direction</b>

                    <md-radio-group ng-model="selectedDirection">
                        <md-radio-button ng-repeat="direction in availableDirections" ng-value="direction"
                                         class="text-capitalize">
                            {{direction}}
                        </md-radio-button>
                    </md-radio-group>
                </div>

                <div layout="column" layout-align="start center">
                    <b>Open/Closed</b>

                    <md-checkbox ng-model="isOpen">
                        Open
                    </md-checkbox>
                </div>

                <div layout="column" layout-align="start center">
                    <b>Animation Modes</b>

                    <md-radio-group ng-model="selectedMode">
                        <md-radio-button ng-repeat="mode in availableModes" ng-value="mode">
                            {{mode}}
                        </md-radio-button>
                    </md-radio-group>
                </div>
            </div>

        </md-content>
    </div>

    <div ng-cloak="" layout-gt-sm="row" layout="column" class="listdemoBasicUsage">

        <div flex-gt-sm="50" flex="">

            <md-toolbar layout="row" class="md-hue-3">
                <div class="md-toolbar-tools">
                    <span>Normal</span>
                </div>
            </md-toolbar>

            <md-content>
                <md-list flex="">
                    <md-subheader class="md-no-sticky">3 line item (with hover)</md-subheader>
                    <md-list-item class="md-3-line" ng-repeat="item in todos" ng-click="null">
                        <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">

                        <div class="md-list-item-text" layout="column">
                            <h3>{{ item.who }}</h3>
                            <h4>{{ item.what }}</h4>

                            <p>{{ item.notes }}</p>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-subheader class="md-no-sticky">2 line item</md-subheader>
                    <md-list-item class="md-2-line">
                        <img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}">

                        <div class="md-list-item-text">
                            <h3>{{ todos[0].who }}</h3>

                            <p>Secondary text</p>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
                    <md-list-item class="md-3-line md-long-text">
                        <img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}">

                        <div class="md-list-item-text">
                            <h3>{{ todos[0].who }}</h3>

                            <p>
                                Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa
                                quam.
                                Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat
                                condimentum
                                velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
                                himenaeos.
                            </p>
                        </div>
                    </md-list-item>
                    <md-list-item class="md-3-line md-long-text">
                        <img ng-src="{{todos[1].face}}?25" class="md-avatar" alt="{{todos[1].who}}">

                        <div class="md-list-item-text">
                            <h3>{{ todos[1].who }}</h3>

                            <p>
                                Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa
                                quam.
                                Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat
                                condimentum
                                velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos
                                himenaeos.
                            </p>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-subheader class="md-no-sticky">Classes</md-subheader>
                    <md-list-item class="md-2-line" ng-repeat="phone in phones">
                        <md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon"
                                 ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
                        <img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
                             ng-if="phone.options.face">

                        <div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
                            <h3> {{ phone.number }} </h3>

                            <p> {{ phone.type }} </p>
                        </div>
                        <md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)"
                                   ng-if="phone.options.actionIcon" aria-label="call">
                            <md-icon md-svg-icon="{{phone.options.actionIcon}}"></md-icon>
                        </md-button>
                    </md-list-item>
                </md-list>
            </md-content>
        </div>

        <md-divider></md-divider>

        <div flex-gt-sm="50" flex="">

            <md-toolbar layout="row" class="md-hue-3">
                <div class="md-toolbar-tools">
                    <span>Dense</span>
                </div>
            </md-toolbar>

            <md-content>

                <md-list class="md-dense" flex="">
                    <md-subheader class="md-no-sticky">3 line item (dense)</md-subheader>
                    <md-list-item class="md-3-line" ng-repeat="item in todos">
                        <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">

                        <div class="md-list-item-text" layout="column">
                            <h3>{{ item.who }}</h3>
                            <h4>{{ item.what }}</h4>

                            <p>{{ item.notes }}</p>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-subheader class="md-no-sticky">2 line item</md-subheader>
                    <md-list-item class="md-2-line">
                        <img ng-src="{{todos[0].face}}?20" class="md-avatar" alt="{{todos[0].who}}">

                        <div class="md-list-item-text">
                            <h3>{{ todos[0].who }}</h3>

                            <p>Secondary text</p>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-subheader class="md-no-sticky">3 line item, long paragraph (see on mobile)</md-subheader>
                    <md-list-item class="md-3-line md-long-text">
                        <img ng-src="{{todos[0].face}}?25" class="md-avatar" alt="{{todos[0].who}}">

                        <div class="md-list-item-text">
                            <h3>{{ todos[0].who }}</h3>

                            <p>
                                Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa
                                quam.
                                Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat
                                condimentum
                                velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
                                himenaeos.
                            </p>
                        </div>
                    </md-list-item>
                    <md-list-item class="md-3-line md-long-text">
                        <img ng-src="{{todos[1].face}}?25" class="md-avatar" alt="{{todos[1].who}}">

                        <div class="md-list-item-text">
                            <h3>{{ todos[1].who }}</h3>

                            <p>
                                Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa
                                quam.
                                Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat
                                condimentum
                                velit. Class aptent taciti sociosqu ad litra torquent per conubia nostra, per inceptos
                                himenaeos.
                            </p>
                        </div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-subheader class="md-no-sticky">Classes</md-subheader>
                    <md-list-item class="md-2-line" ng-repeat="phone in phones">
                        <md-icon md-svg-icon="{{phone.options.icon}}" ng-if="phone.options.icon"
                                 ng-class="{'md-avatar-icon': phone.options.avatarIcon}"></md-icon>
                        <img ng-src="{{phone.options.face}}?25" class="md-avatar" alt="{{phone.options.face}}"
                             ng-if="phone.options.face">

                        <div class="md-list-item-text" ng-class="{'md-offset': phone.options.offset }">
                            <h3> {{ phone.number }} </h3>

                            <p> {{ phone.type }} </p>
                        </div>
                        <md-button class="md-secondary md-icon-button" ng-click="doSecondaryAction($event)"
                                   ng-if="phone.options.actionIcon" aria-label="call">
                            <md-icon md-svg-icon="{{phone.options.actionIcon}}"></md-icon>
                        </md-button>
                    </md-list-item>
                </md-list>
            </md-content>
        </div>

    </div>

    <div layout="column" ng-cloak="" class="progressCirculardemoBasicUsage">

        <md-content layout-padding="">
            <h4>Determinate</h4>

            <p>For operations where the percentage of the operation completed can be determined, use a determinate
                indicator. They
                give users a quick sense of how long an operation will take.</p>

            <div layout="row" layout-sm="column" layout-align="space-around">
                <md-progress-circular md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>
            </div>

            <h4>Indeterminate</h4>

            <p>For operations where the user is asked to wait a moment while something finishes up, and it's not
                necessary to
                expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>

            <div layout="row" layout-sm="column" layout-align="space-around">
                <md-progress-circular md-mode="indeterminate"></md-progress-circular>
            </div>

            <h4>Theming</h4>

            <p>
                Your current theme colors can be used to easily colorize your progress indicator with `md-warn` or
                `md-accent`
                colors.
            </p>

            <div layout="row" layout-sm="column" layout-align="space-around">
                <md-progress-circular ng-disabled="!activated" class="md-hue-2"
                                      md-diameter="20px"></md-progress-circular>
                <md-progress-circular ng-disabled="!activated" class="md-accent"
                                      md-diameter="40"></md-progress-circular>
                <md-progress-circular ng-disabled="!activated" class="md-accent md-hue-1"
                                      md-diameter="60"></md-progress-circular>
                <md-progress-circular ng-disabled="!activated" class="md-warn md-hue-3"
                                      md-diameter="70"></md-progress-circular>
                <md-progress-circular ng-disabled="!activated" md-diameter="96"></md-progress-circular>
            </div>
        </md-content>

        <md-content md-theme="dark" layout-padding="">
            <h4>Dark theme</h4>

            <p>
                This is an example of the <b>md-progress-circular</b> component, with a dark theme.
            </p>

            <div layout="row" layout-sm="column" layout-align="space-around">
                <md-progress-circular ng-disabled="!activated" class="md-hue-2"
                                      md-diameter="20px"></md-progress-circular>
                <md-progress-circular ng-disabled="!activated" class="md-accent"
                                      md-diameter="40"></md-progress-circular>
                <md-progress-circular ng-disabled="!activated" class="md-accent md-hue-1"
                                      md-diameter="60"></md-progress-circular>
                <md-progress-circular ng-disabled="!activated" class="md-warn md-hue-3"
                                      md-diameter="70"></md-progress-circular>
                <md-progress-circular ng-disabled="!activated" md-diameter="96"></md-progress-circular>
            </div>
        </md-content>

        <md-content layout="row" layout-align="start center" layout-padding="">
            <p>Progress Circular Indicators: </p>

            <h5>Off</h5>
            <md-switch ng-model="activated" aria-label="Toggle Progress Circular Indicators">
                <h5>On</h5>
            </md-switch>
        </md-content>

    </div>

    <div layout="column" style="height:500px;" ng-cloak="" class="sidenavdemoBasicUsage">

        <section layout="row" flex="">

            <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')"
                        md-whiteframe="4">

                <md-toolbar class="md-theme-indigo">
                    <h1 class="md-toolbar-tools">Sidenav Left</h1>
                </md-toolbar>
                <md-content layout-padding="" ng-controller="LeftCtrl">
                    <md-button ng-click="close()" class="md-primary" hide-gt-md="">
                        Close Sidenav Left
                    </md-button>
                    <p hide="" show-gt-md="">
                        This sidenav is locked open on your device. To go back to the default behavior,
                        narrow your display.
                    </p>
                </md-content>

            </md-sidenav>

            <md-content flex="" layout-padding="">

                <div layout="column" layout-align="top center">
                    <p>
                        The left sidenav will 'lock open' on a medium (=960px wide) device.
                    </p>

                    <p>
                        The right sidenav will focus on a specific child element.
                    </p>

                    <div>
                        <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
                            Toggle left
                        </md-button>
                    </div>

                    <div>
                        <md-button ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary">
                            Toggle right
                        </md-button>
                    </div>
                </div>

                <div flex=""></div>

            </md-content>

            <md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">

                <md-toolbar class="md-theme-light">
                    <h1 class="md-toolbar-tools">Sidenav Right</h1>
                </md-toolbar>
                <md-content ng-controller="RightCtrl" layout-padding="">
                    <form>
                        <md-input-container>
                            <label for="testInput">Test input</label>
                            <input type="text" id="testInput" ng-model="data" md-autofocus="">
                        </md-input-container>
                    </form>
                    <md-button ng-click="close()" class="md-primary">
                        Close Sidenav Right
                    </md-button>
                </md-content>

            </md-sidenav>

        </section>

    </div>

    <div ng-cloak="" class="tabsdemoDynamicHeight">
        <md-content>
            <md-tabs md-dynamic-height="" md-border-bottom="">
                <md-tab label="one">
                    <md-content class="md-padding">
                        <h1 class="md-display-2">Tab One</h1>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
                            Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales
                            pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies
                            mi.</p>
                    </md-content>
                </md-tab>
                <md-tab label="two">
                    <md-content class="md-padding">
                        <h1 class="md-display-2">Tab Two</h1>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
                            Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales
                            pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies
                            mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum
                            enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida.
                            Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a
                            facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac
                            lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
                            venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
                            Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
                            orci posuere, nec luctus mauris semper.</p>

                        <p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
                            magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
                            Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras
                            ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
                            tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
                            nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>

                        <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
                            molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit
                            erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac
                            est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
                    </md-content>
                </md-tab>
                <md-tab label="three">
                    <md-content class="md-padding">
                        <h1 class="md-display-2">Tab Three</h1>

                        <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
                            molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit
                            erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac
                            est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
                    </md-content>
                </md-tab>
            </md-tabs>
        </md-content>
    </div>

    <div layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-cloak="" paddi="">
        <p>
            Toast can be dismissed with a swipe, a timer, or a button.<br>
        </p>


        <div layout="row" layout-align="space-around">
            <div style="width:50px"></div>
            <md-button ng-click="showSimpleToast()">
                Show Simple
            </md-button>
            <md-button class="md-raised" ng-click="showActionToast()">
                Show With Action
            </md-button>
            <div style="width:50px"></div>
        </div>

        <div layout="row" id="toastBounds">

            <div>
                <p><b>Toast Position: "{{getToastPosition()}}"</b></p>
                <md-checkbox ng-repeat="(name, isSelected) in toastPosition" ng-model="toastPosition[name]">
                    {{name}}
                </md-checkbox>
            </div>
        </div>
    </div>


</div>

script.js

  angular.module('mdTesterApp', ['ngRoute', 'ngMaterial', 'ngAnimate', 'ngMessages','material.svgAssetsCache'])
    .config(function ($routeProvider, $mdThemingProvider, $mdIconProvider) {
            $mdIconProvider.iconSet('communication', 'img/icons/sets/communication-icons.svg', 24);
                        
    
            $mdThemingProvider.alwaysWatchTheme(true);

            //Custom Pallet
            $mdThemingProvider.definePalette('customPallet', {
                '50': '#fffdfb',
                '100': '#fbd2b3',
                '200': '#f8b37e',
                '300': '#f48b3a',
                '400': '#f27a1d',
                '500': '#e46b0d',
                '600': '#c75d0b',
                '700': '#aa500a',
                '800': '#8d4208',
                '900': '#703506',
                'A100': '#fffdfb',
                'A200': '#fbd2b3',
                'A400': '#f27a1d',
                'A700': '#aa500a',
                'contrastDefaultColor': 'light',
                'contrastDarkColors': '50 100 200 300 400 500 A100 A200 A400'
            });


            var primary = 'green';
            var accent = 'yellow';
            var warn = 'red';
            var background = 'grey';
    
    
    
            $mdThemingProvider.definePalette('sickkidsPalettePrimary', {
                '50': '#818A8F',
                '100': '#818A8F',
                '200': '#818A8F',
                '400': '#818A8F',
                '600': '#818A8F',
                '700': '#818A8F',
                '900': '#818A8F',
                'A200': '#818A8F',
                'A400': '#818A8F',
                'A700': '#818A8F',

                '500': '#818A8F',
                'A100': '#9ba2a6',
                '800': '#c9cdcf',
                '300': '#e4e6e7',
                'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
                                                    // on this palette should be dark or light

                'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
                    '200', '300', '400', 'A100'],
                'contrastLightColors': undefined    // could also specify this if default was 'dark'
            });
    
            $mdThemingProvider.definePalette('sickkidsPaletteAccent', {
                '50': '#00AFD8',
                '100': '#00AFD8',
                '200': '#00AFD8',
                '400': '#00AFD8',
                '600': '#00AFD8',
                '700': '#00AFD8',
                '900': '#00AFD8',
                'A200': '#00AFD8',
                'A400': '#00AFD8',
                'A700': '#00AFD8',

                '500': '#00AFD8',
                'A100': '#00C5F2',
                '800': '#00CAF7',
                '300': '#00D0FF',
                'contrastDefaultColor': 'light',    // whether, by default, text (contrast)
                                                    // on this palette should be dark or light

                'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
                    '200', '300', '400', 'A100'],
                'contrastLightColors': undefined    // could also specify this if default was 'dark'
            });
            var DARK_FOREGROUND = {
                name: 'dark',
                '1': 'rgba(0,0,0,0.87)',
                '2': 'rgba(0,0,0,0.54)',
                '3': 'rgba(0,0,0,0.54)',
                '4': 'rgba(0,0,0,0.12)'
            };

            var primary = 'green';
            var accent = 'yellow';
            var warn = 'red';
            var background = 'grey';

            //default
            $mdThemingProvider.theme('default')
                .primaryPalette(primary)
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

            //dark
            $mdThemingProvider.theme('dark')
                .primaryPalette(primary)
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background)
                .dark();



            //icu-web
            $mdThemingProvider.theme('icuweb')
                .primaryPalette('sickkidsPalettePrimary')
                .accentPalette('sickkidsPaletteAccent')
                .warnPalette('red')
                .backgroundPalette(background);
            $mdThemingProvider.theme('icu-web').foregroundPalette = DARK_FOREGROUND;
   

            //test theme
            $mdThemingProvider.theme('customPallet')
                .primaryPalette('customPallet')
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

            $mdThemingProvider.theme('blue')
                .primaryPalette('blue')
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

            $mdThemingProvider.theme('yellow')
                .primaryPalette('yellow')
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

            $mdThemingProvider.theme('orange')
                .primaryPalette('orange')
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

            $mdThemingProvider.theme('teal')
                .primaryPalette('teal')
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

            $mdThemingProvider.theme('purple')
                .primaryPalette('purple')
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

            $mdThemingProvider.theme('lime')
                .primaryPalette('lime')
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

            $mdThemingProvider.theme('amber')
                .primaryPalette('amber')
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

            $mdThemingProvider.theme('brown')
                .primaryPalette('brown')
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

            $mdThemingProvider.theme('grey')
                .primaryPalette('grey')
                .accentPalette(accent)
                .warnPalette(warn)
                .backgroundPalette(background);

        })
        .controller('MainController', function ($scope, $interval, $timeout, $mdSidenav, $log, $mdToast) {

            $scope.theme = 'default';
            $scope.changeTheme = function (theme) {
                $scope.theme = theme;
            };

            //buttons
            $scope.title1 = 'Button';
            $scope.title4 = 'Warn';
            $scope.isDisabled = true;

            $scope.googleUrl = 'http://google.com';

            //date
            $scope.myDate = new Date();
            $scope.isOpen = false;
            $scope.myDate = new Date();

            $scope.minDate = new Date(
                $scope.myDate.getFullYear(),
                $scope.myDate.getMonth() - 2,
                $scope.myDate.getDate()
            );

            $scope.maxDate = new Date(
                $scope.myDate.getFullYear(),
                $scope.myDate.getMonth() + 2,
                $scope.myDate.getDate()
            );

            $scope.onlyWeekendsPredicate = function (date) {
                var day = date.getDay();
                return day === 0 || day === 6;
            };

            //fab button
            $scope.topDirections = ['left', 'up'];
            $scope.bottomDirections = ['down', 'right'];

            $scope.isOpen = false;

            $scope.availableModes = ['md-fling', 'md-scale'];
            $scope.selectedMode = 'md-fling';

            $scope.availableDirections = ['up', 'down', 'left', 'right'];
            $scope.selectedDirection = 'up';

            //input
            $scope.user = {
                title: 'Developer',
                email: 'ipsum@lorem.com',
                firstName: '',
                lastName: '',
                company: 'Google',
                address: '1600 Amphitheatre Pkwy',
                city: 'Mountain View',
                state: 'CA',
                biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!',
                postalCode: '94043'
            };

            $scope.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
            'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
            'WY').split(' ').map(function (state) {
                    return {abbrev: state};
                });

            //errors
            $scope.project = {
                description: 'Nuclear Missile Defense System',
                rate: 500,
                special: true
            };

            //list
            var imagePath = 'http://www.translucentcomputing.com/img/about/patryk.png';

            $scope.phones = [
                {
                    type: 'Home',
                    number: '(555) 251-1234',
                    options: {
          icon: 'communication:phone',
                    }
                },
                {
                    type: 'Cell',
                    number: '(555) 786-9841',
                    options: {
          icon: 'communication:phone',
                        avatarIcon: true
                    }
                },
                {
                    type: 'Office',
                    number: '(555) 314-1592',
                    options: {
                        face: imagePath
                    }
                },
                {
                    type: 'Offset',
                    number: '(555) 192-2010',
                    options: {
                        offset: true,
          icon: 'communication:phone',
                    }
                }
            ];
            $scope.todos = [
                {
                    face: imagePath,
                    what: 'Brunch this weekend?',
                    who: 'Min Li Chan',
                    when: '3:08PM',
                    notes: " I'll be in your neighborhood doing errands"
                },
                {
                    face: imagePath,
                    what: 'Brunch this weekend?',
                    who: 'Min Li Chan',
                    when: '3:08PM',
                    notes: " I'll be in your neighborhood doing errands"
                },
                {
                    face: imagePath,
                    what: 'Brunch this weekend?',
                    who: 'Min Li Chan',
                    when: '3:08PM',
                    notes: " I'll be in your neighborhood doing errands"
                },
                {
                    face: imagePath,
                    what: 'Brunch this weekend?',
                    who: 'Min Li Chan',
                    when: '3:08PM',
                    notes: " I'll be in your neighborhood doing errands"
                },
                {
                    face: imagePath,
                    what: 'Brunch this weekend?',
                    who: 'Min Li Chan',
                    when: '3:08PM',
                    notes: " I'll be in your neighborhood doing errands"
                }
            ];


            //spinner
            $scope.activated = true;
            $scope.determinateValue = 30;

            // Iterate every 100ms, non-stop and increment
            // the Determinate loader.
            $interval(function () {

                $scope.determinateValue += 1;
                if ($scope.determinateValue > 100) {
                    $scope.determinateValue = 30;
                }

            }, 100);

            //side nav
            $scope.toggleLeft = buildDelayedToggler('left');
            $scope.toggleRight = buildToggler('right');
            $scope.isOpenRight = function () {
                return $mdSidenav('right').isOpen();
            };

            /**
             * Supplies a function that will continue to operate until the
             * time is up.
             */
            function debounce(func, wait, context) {
                var timer;

                return function debounced() {
                    var context = $scope,
                        args = Array.prototype.slice.call(arguments);
                    $timeout.cancel(timer);
                    timer = $timeout(function () {
                        timer = undefined;
                        func.apply(context, args);
                    }, wait || 10);
                };
            }

            /**
             * Build handler to open/close a SideNav; when animation finishes
             * report completion in console
             */
            function buildDelayedToggler(navID) {
                return debounce(function () {
                    // Component lookup should always be available since we are not using `ng-if`
                    $mdSidenav(navID)
                        .toggle()
                        .then(function () {
                            $log.debug("toggle " + navID + " is done");
                        });
                }, 200);
            }

            function buildToggler(navID) {
                return function () {
                    // Component lookup should always be available since we are not using `ng-if`
                    $mdSidenav(navID)
                        .toggle()
                        .then(function () {
                            $log.debug("toggle " + navID + " is done");
                        });
                };
            }


            //toast
            var last = {
                bottom: false,
                top: true,
                left: false,
                right: true
            };

            $scope.toastPosition = angular.extend({}, last);

            $scope.getToastPosition = function () {
                sanitizePosition();

                return Object.keys($scope.toastPosition)
                    .filter(function (pos) {
                        return $scope.toastPosition[pos];
                    })
                    .join(' ');
            };

            function sanitizePosition() {
                var current = $scope.toastPosition;

                if (current.bottom && last.top) current.top = false;
                if (current.top && last.bottom) current.bottom = false;
                if (current.right && last.left) current.left = false;
                if (current.left && last.right) current.right = false;

                last = angular.extend({}, current);
            }

            $scope.showSimpleToast = function () {
                var pinTo = $scope.getToastPosition();

                $mdToast.show(
                    $mdToast.simple()
                        .textContent('Simple Toast!')
                        .position(pinTo)
                        .hideDelay(3000)
                );
            };

            $scope.showActionToast = function () {
                var pinTo = $scope.getToastPosition();
                var toast = $mdToast.simple()
                    .textContent('Marked as read')
                    .action('UNDO')
                    .highlightAction(true)
                    .highlightClass('md-accent')// Accent is used by default, this just demonstrates the usage.
                    .position(pinTo);

                $mdToast.show(toast).then(function (response) {
                    if (response == 'ok') {
                        alert('You clicked the \'UNDO\' action.');
                    }
                });
            };


        })
        .controller('LeftCtrl', function ($scope, $timeout, $mdSidenav, $log) {
            $scope.close = function () {
                // Component lookup should always be available since we are not using `ng-if`
                $mdSidenav('left').close()
                    .then(function () {
                        $log.debug("close LEFT is done");
                    });

            };
        })
        .controller('RightCtrl', function ($scope, $timeout, $mdSidenav, $log) {
            $scope.close = function () {
                // Component lookup should always be available since we are not using `ng-if`
                $mdSidenav('right').close()
                    .then(function () {
                        $log.debug("close RIGHT is done");
                    });
            };
        }).controller('ToastCtrl', function ($scope, $mdToast) {
            $scope.closeToast = function () {
                $mdToast.hide();
            };
        }); 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1-master-491d139/angular-material.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>

style.css

.buttondemoBasicUsage section {
    background: #f7f7f7;
    border-radius: 3px;
    text-align: center;
    margin: 1em;
    position: relative !important;
    padding-bottom: 10px;
}

.buttondemoBasicUsage md-content {
    margin-right: 7px;
}

.buttondemoBasicUsage section .md-button {
    margin-top: 16px;
    margin-bottom: 16px;
}

.buttondemoBasicUsage .label {
    position: absolute;
    bottom: 5px;
    left: 7px;
    font-size: 14px;
    opacity: 0.54;
}

.contentdemoBasicUsage div.demo-content {
  height: 450px; }

.contentdemoBasicUsage div[ng-controller] {
  height: 100%;
  padding-bottom: 15px; }

.contentdemoBasicUsage md-content {
  padding: 24px; }

.carddemoBasicUsage .card-media {
  background-color: #999999; }

.fabSpeedDialdemoBasicUsage .text-capitalize {
  text-transform: capitalize; }

.fabSpeedDialdemoBasicUsage .md-fab:hover, .fabSpeedDialdemoBasicUsage .md-fab.md-focused {
  background-color: #000 !important; }

.fabSpeedDialdemoBasicUsage p.note {
  font-size: 1.2rem; }

.fabSpeedDialdemoBasicUsage .lock-size {
  min-width: 300px;
  min-height: 300px;
  width: 300px;
  height: 300px;
  margin-left: auto;
  margin-right: auto; }

.inputdemoErrors .inputErrorsApp {
  min-height: 48px; }

.inputdemoErrors md-input-container > p {
  font-size: 0.8em;
  text-align: left;
  width: 100%; }

.listdemoBasicUsage md-divider {
  margin-top: 10px;
  margin-bottom: 0; }

.progressCirculardemoBasicUsage body {
  padding: 20px; }

.progressCirculardemoBasicUsage h4 {
  margin: 10px 0; }

.progressCirculardemoBasicUsage md-progress-circular {
  margin-bottom: 20px; }

.progressCirculardemoBasicUsage #loaders > md-switch {
  margin: 0;
  margin-left: 10px;
  margin-top: -10px; }

.progressCirculardemoBasicUsage #loaders > h5 {
  margin-top: 0; }

.progressCirculardemoBasicUsage #loaders > p {
  margin-right: 20px;
  margin-bottom: 24px; }

.progressCirculardemoBasicUsage p.small {
  font-size: 0.8em;
  margin-top: -18px; }

.progressCirculardemoBasicUsage hr {
  width: 100%;
  margin-top: 20px;
  border-color: rgba(221, 221, 177, 0.1); }

.progressCirculardemoBasicUsage p.small > code {
  font-size: 0.8em; }

.progressCirculardemoBasicUsage .visible {
  border-color: rgba(221, 221, 177, 0); }

.tabsdemoDynamicHeight md-content {
  background-color: transparent !important; }
  .tabsdemoDynamicHeight md-content md-tabs {
    background: #f6f6f6;
    border: 1px solid #e1e1e1; }
    .tabsdemoDynamicHeight md-content md-tabs md-tabs-wrapper {
      background: white; }
  .tabsdemoDynamicHeight md-content h1:first-child {
    margin-top: 0; }

.toolbardemoBasicUsage md-toolbar md-icon.md-default-theme {
  color: white; }

styles

<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1-master-491d139/angular-material.css" rel="stylesheet" />