icon-button.scss

@use '@material/icon-button' as mdc-icon-button;
@use '../mdc-helpers/mdc-helpers';
@use 'button-base';

@include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);

.mat-mdc-icon-button {
  @include button-base.mat-private-button-interactive() {
    border-radius: 50%;
  }

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

  @include button-base.mat-private-button-disabled();
  @include button-base.mat-private-button-touch-target(true);

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