Material & Angular not working for me

Hello All,

I’m working through a tutorial to learn Angular 17 and I’m stuck getting Material components to work with the Angular application. Put together a script to display a button, basic copy/past but the buttons aren’t reflecting the output that appears on site.
my buttons appear as black but the example the buttons appear blue… I included the links below

What am I missing.


  <div class="example-label">Flat</div>
  <div class="example-button-row">
    <button mat-raised-button>Basic</button>
    <button mat-flat-button disabled>Disabled</button>
    <a mat-flat-button href="" target="_blank">Link</a>


import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';

  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MatButtonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
export class AppComponent {
  title = 'AppComponent';  


.example-button-row .mat-mdc-button-base {
  margin: 8px 8px 8px 0;

sample of package.json - as you can see angular material is installed

  "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.10",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.10",

Link to my script and as you can see its black:

this link is from site and example: