article: Integrating latest Material Design Web components in Angular | Angular Material Dev

[giscus[bot]]

article: Integrating latest Material Design Web components in Angular | Angular Material Dev

Learn Material Design in Angular, Theming Angular Material Components and Developing your Angular application with Material Design like a pro.

https://angular-material.dev/articles/integrate-material-web-in-angular

[sbparsons]

Nice and simple, but with all the info you need to get started with this. Thanks, helped me a lot.

[shhdharmen]

I am glad that you found this helpful. Thanks for your feedback.

[alejandra-rojas]

thanks for this.do you have an example for icon buttons?

[shhdharmen]

It should be same as the example given in article for <md-elevated-button> Elevated </md-elevated-button>. Instead of md-elevated-button just import and use md-icon-button. See below code snippet for example.

import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import '@material/web/icon/icon';
import '@material/web/iconbutton/filled-icon-button';
import '@material/web/iconbutton/filled-tonal-icon-button';
import '@material/web/iconbutton/icon-button';
import '@material/web/iconbutton/outlined-icon-button';

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
<h4>Icon Buttons</h4>
    <md-icon-button>
  <md-icon>check</md-icon>
</md-icon-button>
<md-filled-icon-button>
  <md-icon>check</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button>
  <md-icon>check</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button>
  <md-icon>check</md-icon>
</md-outlined-icon-button>
  `
})
export class AppComponent {}