Angular Material Theming - custom components

style.scss

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

@include mat-core();

@import 'my-theme.scss';

// import custom componenet themes
// unofficial naming convention to support nice ordering of files in IDE 
// to see theme under the original style file of the componenent
@import 'app/shared/big-input/big-input.component.scss-theme';
@import 'app/shared/flip-toggle-button/flip-toggle-button.component.scss-theme';

// you only have to add additional componenets here (instead of in every theme class)
@mixin custom-components-theme($theme) {
  @include big-input-theme($theme);
  @include flip-toggle-button-theme($theme);
}

.default-theme {
  @include angular-material-theme($my-theme);
  
  // include custom components theme mixin once per theme class
  @include custom-components-theme($my-theme);
}