I'm facing an issue where, despite specifying imports in my SCSS file and setting up a custom theme, the checkbox styles are not visible except for those related to typography.
This is what my SCSS file looks like:
@import "~bootstrap/scss/bootstrap-reboot";
@import "~bootstrap/scss/bootstrap-grid";
@import "https://fonts.googleapis.com/icon?family=Material+Icons";
@import '~@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mat-cyan, 600);
$app-accent: mat-palette($mat-indigo, 900);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
@include mat-checkbox-theme($app-theme);
Even after applying these styles to my page, I can't see the actual checkbox - only its label is visible. There are no errors or warnings in the console.
I also attempted to add
@include angular-material-theme($app-theme);It appears that Angular Material keeps the checkbox styles confined within the component and doesn't export them in SCSS.