Angular material .mat-icon-button class not present in style section in index.html

Question

I am adding a mat-button in my angular component,

<button mat-button class="toggle-button-navbar mat-icon-button" fxHide.lt-sm> 
    ​<mat-icon>menu</mat-icon>  ​
</button>

The button is showing. I expect the .mat-icon-button css class to be included in a section in the index.html. But it is not there. I am following a working example which does have the .mat-icon-button css class in an section of the served index.html file (not in the styles.bundle.css file). In that working example, when I inspect the element, the .mat-icon-button css class shows as:

.mat-icon-button {
    padding: 0;
    min-width: 0;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    line-height: 40px;
    border-radius: 50%;
}

I found out that this css class is packed in MatButton.decorators in the @angular/material/bundles/materical-button.umd.js file. However, I could not figure out how this css class showing up in the index.html of the working example, but not showing up in my index.html.

Answer 1

Simply Import the MatButtonModule to solve this. Make sure you also imported the MatIconModule.

Angular has to known that the mat-button attribute and the <mat-icon> tag.

The mat-button attribute applies a component. To register the component you have to import the MatButtonModule Module, which declares the mat-button component.

The <mat-icon> tag is a component. To register the mat-icon component you have to import the MatIconModule Module, which declares the component. This will create the mat-icon component and import the css rules.

To solve your Problem add following Code to your Module:

import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
...
@NgModule({
  imports: [
    ...
    MatButtonModule,
    MatIconModule,
  ],
...

For more Information about the mat-icon Module see: https://material.angular.io/components/icon/api

For more Information about Component registration in Angular see: https://angular.io/guide/architecture