How to style button CSS in Angular Material?

Question

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";

Have you included the css to your angular-cli.json? Have you installed the material package trough angular cli or manually? — user8376580
– user8376580, Commented Aug 8, 2017 at 11:22
@user8376580 The OP already stated that he doesn't use Angular CLI — Edric
– Edric, Commented Aug 8, 2017 at 16:54

mxr7350 · Accepted Answer · 2017-08-30 14:11:30Z

1

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.

edited Aug 30, 2017 at 14:11

answered Aug 8, 2017 at 11:24

mxr7350

1,4543 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nehal · Accepted Answer · 2017-08-08 12:07:41Z

0

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">

answered Aug 8, 2017 at 12:07

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

2 Comments

Daniel Over a year ago

Problem is that it is work for remaining elements from material?

Nehal Over a year ago

You mean the prebuilt theme is working for least elements? And what do you mean by least elements?

Collectives™ on Stack Overflow

How to style button CSS in Angular Material?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related