i,
mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  line-height: 24px;

  @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
    @include media-breakpoint($materialBreakpoint) {
      $infix: if($materialBreakpoint == null, '', '-#{$breakpoint}');

      @for $size from 2 through 128 {
        &.s#{$infix}-#{$size * 2} {
          font-size: #{($size * 2) + 'px'} !important;
          width: #{($size * 2) + 'px'} !important;
          height: #{($size * 2) + 'px'} !important;
          min-width: #{($size * 2) + 'px'} !important;
          min-height: #{($size * 2) + 'px'} !important;
          line-height: #{($size * 2) + 'px'} !important;
        }
      }
    }
  }
}

.icon-button,
.icon-img {
  display: flex;
  justify-content: center;
  justify-items: center;
  background: none;
  border: none;
  width: 20px;
  height: 20px;
  justify-items: center;
  justify-content: center;
  i {
    font-family: 'material-outline-icons';
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-weight: normal;
    &:before {
      display: inline-block;
      font: normal normal normal 20px/1 'Material Design Icons';
      font-size: inherit;
      text-rendering: auto;
      line-height: inherit;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
  &:hover {
    opacity: 0.7;
  }
}
