Sneha Lohar Sneha Lohar - 2 days ago 3
AngularJS Question

md-toolbar not rendering as material toolbar using angular material

I'm using angular material v1.1.0 and trying to create a simple toolbar. I've taken the code from angular material demo, but the toolbar being rendered, instead getting individual elements. Not sure what I'm missing.



var app = angular.module('app', ['ngMaterial', 'ngRoute']);

<html ng-app="app">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My App</title>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.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-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.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/angular_material/1.1.0/angular-material.min.js"></script>
</head>

<body>
<md-content>
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="menu">
<md-icon md-font-set="material-icons">menu</md-icon>
</md-button>
<h2>
<span>My App</span>
</h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="menu">
<md-icon md-font-set="material-icons">whatshot</md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="menu">
<md-icon md-font-set="material-icons">share</md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="menu">
<md-icon md-font-set="material-icons">file_download</md-icon>
</md-button>
<md-button class="md-icon-button" aria-label="menu">
<md-icon md-font-set="material-icons">thumb_up</md-icon>
</md-button>
</div>
</md-toolbar>
</md-content>
</body>
</html>




Answer

You forgot to add rel="stylesheet" while loading the angular-material css. Working pen here:

http://codepen.io/anon/pen/jVYEdM

Comments