Angular Material 2 'mat-button' shows up as regular button

Question

My app.component.ts:

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'tour of heroes';
}

in app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    <button mat-raised-button>Basic</button>
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<ul>
  <li>
    <h2>
      <a routerLink="/history" routerLinkActive="history">Heroes</a>
    </h2>
  </li>

  <li>
    <h2>
      <a routerLink="/submission-display" routerLinkActive="submission-display">Submissions</a>
    </h2>
  </li>
</ul>

<router-outlet></router-outlet>

When I run I get the standard browser button with no themeing.

Answer 1

You need to register MatButtonModule in app.moudle.ts file

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

@NgModule({
  imports: [MatButtonModule]
})