Angular material Could not find Angular Material core theme

In my Angular2 project I install lastest material plugin from https://material.angular.io/guide/getting-started. Next I add @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; to my css file for my component. But in my console Angular shows this error:

>material.es5.js:148 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming`

The material components not working. Whats wrong?

Please insert below code into your styles.css which is located in your src folder.

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

You can select any css under the prebuilt-themes folder.

put that code into your angular-cli.json file

"styles": [
    "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
  ],

it's works fine for me

I got it working with the following steps:

1. Import this (or other) Material theme into your main css file:

   @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

2. Also make sure to register this main css file with the app.component file

   @Component({ selector: 'app', styleUrls: [ './app.component.css' ] })

3. Double check that the components you need are imported from @angular/material in your app.module file

   import { MdCardModule, MdInputModule } from '@angular/material';

Add the following line to your src/styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

You can try other Css classes as well. Here are the available classes:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';

If this is happening during testing with Karma, add the following pattern to the files list in your karma.config.js file.

module.exports = function (config) {
   config.set({
    basePath: '',
    ...,
    files: [
        {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true}
    ],
    ...
}

For more detail see here: https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite

If you're using Angular-CLI, you'll need to make a reference to the themes file, e.g. "candy.scss" in the .angular-cli.json file. Look closely, do you have a *.scss? It's a Sass file. Look here for information: Angular Material 2 Theming instructions. So, in the .angular-cli.json, under the styles property, add "themes/candy.scss", next to the "themes/styles.css". I have a folder in my projects called "themes". I put the styles.css and the candy.scss in the themes folder. Now, Angular-CLI can find your theme.

Add:

@import "~@angular/material/prebuilt-themes/indigo-pink.css"

to your style.css

In addition to @import statements as mentioned above. Please ensure you add encapsulation: ViewEncapsulation.None inside @Component decorator.

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None})

If you are looking for Angular Material setup for .Net core 1.1 or 2.0 Angular SPA visual studio template. Please find the well documented setup instruction details here.

If you need only the material icons and you don't want import the whole material css use this, in your root css:

/** disable angular mat theme warning */
.mat-theme-loaded-marker {
  display: none;
}

Add

@import '@angular/material/prebuilt-themes/deeppurple-amber.css'

to the style.css file, OR add

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

in the head section of index.html file

I don't know how many may find this useful, but restarting ng server worked after trying different solutions from Stack overflow.

worked for me adding in css section of index.html

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

As mentioned here here

Check any other @imports in your css or scss file. I experienced this issue and could not resolve it until other imports had been removed.

Add @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to style.css of your angular project .

In case you want any other theme just folow the steps: Node modules -> @angular -> material -> prebuilt-themes ->

i)deeppurple-amber : @import "~@angular/material/prebuilt-themes/deeppurple-amber.css

ii)indigo-pink : @import "~@angular/material/prebuilt-themes/indigo-pink.css

iii)pink-bluegrey : @import "~@angular/material/prebuilt-themes/pink-bluegrey.css

iv)purple-green : @import "~@angular/material/prebuilt-themes/purple-green.css

And if you want to read you can visit :Theming your Angular Material app

I had the same error as you and I found the solution in one of the comments. Since that solution worked for me, I want to post it as an answer.

If your project was already running and you installed your material components afterwards, you need to restart your project first. That alone can be the fix already.

Material design modules contains scss, migrate css files into scss from following two steps:

1. npm i schematics-scss-migrate
2. ng g schematics-scss-migrate:scss-migrate

Hope this works fro everyone :)