title: Starting with angular material design
body: <p>I've been trying to use Angular Material Design for one week now with no success. I spent my time studying HTML/CSS, JavaScript, and AngularJS to understand what is going wrong, but I still don't know what the problem is. </p>
  
  <p>Basically what I have tried is the <em>"Getting Started"</em> section of the <a href="https://material.angularjs.org/#/getting-started" rel="nofollow">Google Angular Material Design</a> website but none of them worked with me:</p>
  
  <p>I've tried to copy its <a href="https://github.com/angular/material-start" rel="nofollow">Github Starter Project</a> but I got this as result: </p>
  
  <p><em>edit: sorry my account is new and I can't post images yet, but it is a print screen of my website not even running angular ![My Result][3] .</em></p>
  
  <p>I've also tried to copy its simple Hello World example, but I got very similar problems.</p>
  
  <p>I don't know what I'm doing wrong, but I think it is very simple. I have a feeling that I'm not importing the right CSS/JS.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('StarterApp', ['ngMaterial']);
  
  app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
    $scope.toggleSidenav = function(menuId) {
      $mdSidenav(menuId).toggle();
    };
   
  }]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menuBtn {
    background-color: transparent;
    border: none;
    height: 38px;
    margin: 16px;
    position: absolute;
    width: 36px;
  } 
  md-toolbar h1 {
    font-size: 1.250em;
    font-weight: 400;
    margin: auto;
  }
  md-list .md-button {
    color: inherit;
    font-weight: 500;
    text-align: left;
    width: 100%;
  }
  .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0; 
    position: absolute;
    width: 1px;
  }
  
  /* Using Data-URI converted from svg until &lt;md-icon&gt; becomes available 
  https://github.com/google/material-design-icons
  */
  .menuBtn {
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkhlYWRlciI+CiAgICA8Zz4KICAgICAgICA8cmVjdCB4PSItNjE4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPgogICAgPC9nPgo8L2c+CjxnIGlkPSJMYWJlbCI+CjwvZz4KPGcgaWQ9Ikljb24iPgogICAgPGc+CiAgICAgICAgPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgICAgPHBhdGggZD0iTTMsMThoMTh2LTJIM1YxOHogTTMsMTNoMTh2LTJIM1YxM3ogTTMsNnYyaDE4VjZIM3oiIHN0eWxlPSJmaWxsOiNmM2YzZjM7Ii8+CiAgICA8L2c+CjwvZz4KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPgogICAgPGcgZGlzcGxheT0iaW5saW5lIj4KICAgIDwvZz4KPC9nPgo8L3N2Zz4=) no-repeat  center center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en" ng-app="StarterApp"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css"&gt;
      &lt;link rel="stylesheet" href="CSS/test.css"&gt;
    &lt;/head&gt;
    &lt;body layout="column" ng-controller="AppCtrl"&gt;
      &lt;md-toolbar layout="row"&gt;
        &lt;button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn"&gt;
          &lt;span class="visually-hidden"&gt;Menu&lt;/span&gt;
        &lt;/button&gt;
        &lt;h1&gt;Hello World&lt;/h1&gt;
      &lt;/md-toolbar&gt;
      &lt;div layout="row" flex&gt;
          &lt;md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-sm')"&gt;
            
          &lt;/md-sidenav&gt;
          &lt;div layout="column" flex id="content"&gt;
              &lt;md-content layout="column" flex class="md-padding"&gt;
                
              &lt;/md-content&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Angular Material Dependencies --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"&gt;&lt;/script&gt;
        
      &lt;script src="JS/test.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  I try to re-create this exact code on [brackets][4] but when I run it in the browser, it doesn't work. Is there something else that I have to do on my code?</p>