Closed
Description
Reproduction
Steps to reproduce:
- Create a theme file
my-theme.scss
$kids-typography: mat.define-typography-config(
$font-family: "Comic Sans",
);
$my-theme: mat.define-light-theme(
(
typography: $kids-typography,
color: (
primary: mat.define-palette($primary-palette, 600),
accent: mat.define-palette($primary-palette, 200),
)
)
);
@include mat.core-theme($my-theme);
@include mat.button-theme($my-theme);- Update
angular.jsonwith the theme file
"styles": ["src/styles/theme/my-theme.scss", "src/styles.scss"],- Content of
style.scss
@use "~@angular/material" as mat;
@include mat.core();- Content of
index.html
<body class="mat-typography">
<p class="mat-h1">Introductory text</p>
<app-root></app-root>
</body>- Content of
app.component.html
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">warn</button>
<router-outlet></router-outlet>Expected Behavior
I would expect that all elements including the Material Components (button in this case) to have the supplied font in $kids-typography
Actual Behavior
The font is not applied to any item.
However if in angular.json I reverse the array to have styles.scss as the first file and my-theme.scss as the second file, then the Font Family is applied, but only to the Button component.
Environment
- Angular: 12.2.0
- CDK/Material: 12.2.8
- Browser(s): All
- Operating System (e.g. Windows, macOS, Ubuntu): Windows