Trouble shooting Material styles not loading on mat-button Angular 7?

Question

I created an app with ng new and added Material with ng add @angular/material. When I run ng serve I do not see to have the material style.css loaded despite having in my angular.json

"architect": {
  "build": {                                                         
    "options": {
      "styles": [                                                    
        "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",                                                                     
        "src/styles.scss"                                            
      ],                                                             
  ...                           

What else am I missing? When I look at the chrome dev console, I see it's loading

• content_scripts.css
• frontend.css
• shadow.css

And one css for the fonts (fonts?family..) and one for the icons icon?family..

---

I've also tried adding to my styles.scss the following,

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

Which also resulted in no additional css files being brought in.

Answer 1

For me, I had created buttons that were unstyled. I actually copied the example from the docs on menu. I didn't realize that the buttons in the example needed more than just that which was documented in the API tab. They otherwise worked with just,

import {MatButtonModule} from '@angular/material/button';

So when I ran that import in my app's module.ts and added it to my imports array it worked. As to why manually including the style with a <link> element didn't work,I was getting the following error when I tried that:

Refused to apply style from 'http://localhost:4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

As for the @import in styles.scss, it seems to be a NOP with Angular 7 if you have

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

If you also have it configured in your angular.json. Everything is working now without the @import statement anywhere.

• Doc bug opened here

Answer 2

Please remove the css import from angular.json and put it into your styles.scss file.

So it will look like this.

angular.json

"architect": { "build": { ... "styles": [ "src/styles.scss" ], ... },

styles.scss

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

If you have issue with upper one add the below lines to styles.scss

@import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! @include mat-core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); // The warn palette is optional (defaults to red). $candy-app-warn: mat-palette($mat-red); // Create the theme object (a Sass map containing all of the palettes). $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($candy-app-theme);

I just paste it from docs.

Also you can add this to index.html by following code

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

Let me know if its work or you need anything else.