Is it possible to theme button style in Angular Material Design

Question

it is known that in Angular Material Design you can customize your theme and even create multiple themes and change them on only one click, at least colors. But is it also possible to change a theme including the style of the elements in html and css? So for example I am holding 2 different themes, in theme A the button should be round cornered green while in theme B the button should be cornered blue. So on one click you can switch between those and the Website will apply it?

Answer 1

Looks like you will want to create a custom theme. Follow the following instructions:

1. Include Angular Material's theming in the top level of your app's SCSS file.

   @import '~@angular/material/theming';
   

2. Include the mat-core mixin.

   @include mat-core();
   

3. Add some palettes: (See here for the full list of palettes)

   $my-app-primary: mat-palette($mat-deeppurple);
   $my-app-accent: mat-palette($mat-amber, A200, A100, A400);
   $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
   

4. Include the theme into the individual theme.

   Note: You can also use classes for toggling between the color themes.

   .my-app-theme {
     @include mat-button-theme($my-app-theme);
   }
   

5. You can then reference this with property binding and ngClass. (ngClass, [class.className])

   <button mat-button [ngClass]="{'my-app-theme': isToggled, 'another-app-theme': !isToggled}" (click)="toggleState()" color="primary">Toggle theme</button>
   

   isToggled: boolean;
   
   toggleState() {
     this.isToggled = !this.isToggled;
   }
   

---

Consider looking at the Theming guide on Angular Material.