CODEWITHSUNDEEP
angularjsangular-material
hello
hello

Reputation: 13

Angular Material md-button not rendering correctly?

I'm pretty new to angularjs and angular material, and I was wondering why my md-button might not be showing up the way it should on my browser but worked on codepen. I put this in my html file:

<html ng-app='app'>
<head>
  <!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src='app.js'></script>
</head>

<body ng-controller='MainCont'>
<md-button class='md-primary'>hello</md-button>
</body>
</html>

app.js:

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

app.controller('MainCont', function(){
});

The module and the controllers are all loading, but in the browser this button shows up like this:

button picture here

Can someone explain to me why this might be? Thanks so much!

Upvotes: 1

Views: 1723

Answers (1)

developer033
developer033

Reputation: 24864

You just forgot to import the css of AngularMaterial:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.0-rc2/angular-material.min.css">

Upvotes: 2

Related Questions