icon-button.scss

@use '@material/icon-button/icon-button' as mdc-icon-button;
@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
@use '@material/theme/custom-properties' as mdc-custom-properties;

@use '../core/tokens/m2/mdc/icon-button' as m2-mdc-icon-button;

@use './button-base';
@use '../core/style/private';

// The slots for tokens that will be configured in the theme can be emitted with no fallback.
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
  $token-slots: m2-mdc-icon-button.get-token-slots();

  // Add the MDC component static styles.
  @include mdc-icon-button.static-styles();

  .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());
  }
}

.mat-mdc-icon-button {
  // Not all applications import the theming which would apply a default padding.
  // TODO: Determine how to enforce theming exists, otherwise padding will be unset.
  padding: 12px;

  // Icon size used to be placed on the host element. Now, in `theme-styles` it is placed on
  // the unused `.mdc-button__icon` class. Explicitly set the font-size here.
  font-size: var(--mdc-icon-button-icon-size);

  // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round.
  border-radius: 50%;

  // Prevent the button from shrinking since it's always supposed to be a circle.
  flex-shrink: 0;

  // Ensure the icons are centered.
  text-align: center;

  svg {
    vertical-align: baseline;
  }

  @include button-base.mat-private-button-disabled() {
    // The color is already dimmed when the button is disabled. Restore the opacity both to
    // help with the color contrast and to align with what we had before switching to the new API.
    opacity: 1;
  };

  @include button-base.mat-private-button-interactive();
  @include button-base.mat-private-button-touch-target(true);
  @include private.private-animation-noop();

  .mat-mdc-button-persistent-ripple {
    border-radius: 50%;
  }

  // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
  // and don't actually do anything. This undoes those conflicting styles.
  &.mat-unthemed,
  &.mat-primary,
  &.mat-accent,
  &.mat-warn {
    &:not(.mdc-ripple-upgraded):focus::before {
      background: transparent;
      opacity: 1;
    }
  }
}