Material Angular - button style not rendering - css

Question

I'm not sure if I found a bug or if my configuration is off. My other components render and look like they're supposed to. But material angular's button styles are not loading right.
I'm using material angular and the issue is with the raised button from here https://material.angular.io/components/button/overview
Here is my markup
<div class="nav-item">
<button class="mat-raised-button"
(click)="navToCreate()">
New Post
</button>
</div>
<div class="nav-item">
<button class="mat-raised-button" *ngIf="isLoggedIn === false" (click)="navToLogin()">
<i class="material-icons md-48">account_box</i>
<span>Login</span>
</button>
</div>
<div class="nav-item">
<button class="mat-raised-button" *ngIf="isLoggedIn === true" (click)="logOut()">
<i class="material-icons md-48">account_box</i>
<span>Logout</span>
</button>
</div>
And here is what they render as
Pic of buttons
My app.module is the following
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { ReactiveFormsModule } from '#angular/forms';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
// Material components
import { MatFormFieldModule } from '#angular/material/form-field';
import { MatInputModule } from '#angular/material/input';
import { MatCardModule } from '#angular/material/card';
import { MatSnackBarModule } from '#angular/material/snack-bar';
import { MatSidenavModule } from '#angular/material/sidenav';
import { MatToolbarModule } from '#angular/material/toolbar';
import { MatTabsModule } from '#angular/material/tabs';
import { MatListModule } from '#angular/material/list';
import { MatButtonModule } from '#angular/material/button';
// Components
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { DiscussionCardComponent } from './components/discussion-card/discussion-card.component';
import { LoginComponent } from './components/login/login.component';
import { DiscussionDetailComponent } from './components/discussion-detail/discussion-detail.component';
import { SideMenuComponent } from './components/side-menu/side-menu.component';
import { DiscussionCreateComponent } from './components/discussion-create/discussion-create.component';
import { DiscussionDetailPageComponent } from './components/discussion-detail-page/discussion-detail-page.component';
import { TruncatePipe } from './pipes/truncate.pipe';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
DiscussionCardComponent,
LoginComponent,
DiscussionDetailComponent,
TruncatePipe,
SideMenuComponent,
DiscussionCreateComponent,
DiscussionDetailPageComponent,
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
ReactiveFormsModule,
FormsModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule,
MatCardModule,
MatSnackBarModule,
MatSidenavModule,
MatToolbarModule,
MatTabsModule,
MatListModule,
MatButtonModule,
],
exports: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Any help is appreciated. Thank you

Answer 1

your error is the mat-raised-button part. It is not a class, it is a property of the button.
<button mat-raised-button> is correct, <button class="mat-raised-button"> is using a class