CODEWITHSUNDEEP
angularangular-material2
Daniel
Daniel

Reputation: 1755

How to style button CSS in Angular Material?

I made an input:

  <div class="button-row">
              <button md-icon-button><i class="material-icons">mode_edit</i></button>
              <button md-icon-button><i class="material-icons">delete_forever</i></button>
            </div>

Now it looks as plain button, without styles. How to style this? I tried to add styles:

// Import Angular Material
@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";

Upvotes: 0

Views: 4025

Answers (2)

mxr7350
mxr7350

Reputation: 1458

If you are not using Angular CLI you can simply include prebuilt css in your index.html file

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

The path depends on your app setup.

Upvotes: 1

Nehal
Nehal

Reputation: 13297

After importing the prebuilt stylesheet to your projecnt, you need to add color property in <md-button> which is either primary, accent or warn.

<div class="button-row">
  <button color="primary" md-icon-button><i class="material-icons">mode_edit</i></button>
  <button color="warn" md-icon-button><i class="material-icons">delete_forever</i></button>
</div>

demo

If import doesn't work, you can try adding this CDN in index.html:

<link href="https://unpkg.com/@angular/material/prebuilt-themes/pink-bluegrey.css" rel="stylesheet">

Upvotes: 0

Related Questions