diff --git a/src/material/_index.scss b/src/material/_index.scss index 53d2b2f165ff..2643f59bc089 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -90,7 +90,7 @@ @forward './button/fab-theme' as fab-* show fab-color, fab-typography, fab-density, fab-theme; @forward './button/icon-button-theme' as icon-button-* show icon-button-color, - icon-button-typography, icon-button-density, icon-button-theme; + icon-button-typography, icon-button-density, icon-button-theme, icon-button-base; @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme, button-toggle-color, button-toggle-typography, button-toggle-density; @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density; diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index 9123fff0533f..f415eddf261b 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -3,6 +3,7 @@ @use '@material/density/functions' as mdc-density-functions; @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme; @use '@material/theme/theme-color' as mdc-theme-color; +@use '../core/style/sass-utils'; @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button; @use './button-theme-private'; @@ -10,6 +11,13 @@ $_icon-size: 24px; +@mixin base($config-or-theme) { + // Add default values for tokens not related to color, typography, or density. + @include sass-utils.current-selector-or-root() { + @include mdc-icon-button-theme.theme(tokens-mdc-icon-button.get-unthemable-tokens()); + } +} + @mixin _ripple-color($color) { --mat-mdc-button-persistent-ripple-color: #{$color}; --mat-mdc-button-ripple-color: #{rgba($color, 0.1)}; @@ -111,6 +119,7 @@ $_icon-size: 24px; $density: theming.get-density-config($theme); $typography: theming.get-typography-config($theme); + @include base($theme); @if $color != null { @include color($color); } diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss index 95a40ba69d24..5cff811c9e28 100644 --- a/src/material/button/icon-button.scss +++ b/src/material/button/icon-button.scss @@ -17,9 +17,6 @@ .mat-mdc-icon-button { // Add the official slots for the MDC component. @include mdc-icon-button-theme.theme-styles($token-slots); - - // Add default values for tokens that aren't outputted by the theming API. - @include mdc-icon-button-theme.theme(m2-mdc-icon-button.get-unthemable-tokens()); } }