icon-button.scss

@use 'sass:map';
@use '@material/icon-button/icon-button' as mdc-icon-button;
@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;

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

@include mdc-helpers.disable-mdc-fallback-declarations {
  @include mdc-icon-button.without-ripple($query: mdc-helpers.$mdc-base-styles-query);
}

.mat-mdc-icon-button {
  @include mdc-helpers.disable-mdc-fallback-declarations {
    $theme-overrides: button-base.mat-private-button-remove-ripple((
      icon-color: inherit,
      // We don't change the color on focus/hover so exclude
      // these styles both to reduce bundle size and specificity.
      focus-icon-color: null,
      hover-icon-color: null,
      pressed-icon-color: null,
    ));

    @include mdc-icon-button-theme.theme-styles(
      map.merge(mdc-icon-button-theme.$light-theme, $theme-overrides));
  }

  // 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;

  @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%;
  }

  // Ensures that the icons are centered.
  .mat-icon {
    text-align: center;

    svg {
      vertical-align: baseline;
    }
  }

  // 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;
    }
  }
}