Angular 2 Material can't load style

Question

I'm starting to develop an web app in Angular using the Angular Material library for the interface. But I'm getting an error when trying to import a prebuilt theme. In order to import it, I added <link rel="stylesheet" href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"> to my index.html file but when i run ng serve I cannot get the file.

Answer 1

Check that your path is correct. I had the same problem and I fixed the path: Mine is

 <link rel="stylesheet" href="lib/@angular/material/core/theming/prebuilt/indigo-pink.css">

Answer 2

If you are using angular-cli follow their steps for including Angular-Material.

Ensure you have the below imports in src/styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

It's slightly different to what angular-material suggest on their own Getting Started site but it worked for me.