How to center an icon in the middle of a button?

Question

css

The question is simple, but how to properly center the icon inside the button. The slick-slider's slide toggle button

<button class="slider-button slider-button__prev feedback-slider__button">
     <i class="fas fa-chevron-left"></i>
   </button>

SASS

.slider-button
  position: absolute
  display: block
  margin: 0 auto
  padding: 0

  width: 63px
  height: 63px

  top: 50%
  transform: translateY(-50%)

  font-size: 20px
  color: $text-color-dark
  border-radius: 100%
  border: 1px solid red
  box-shadow: -5px 5px 11px rgba(83, 83, 83, 0.16)
  background: #ffffff
  transition: all 0.5s ease
  z-index: 2
  cursor: pointer
  &:hover
    background: $active-color
  &__prev
    left: -30px

Result


All the same, as if not in the middle.

The second option is flex!important

position: absolute
  display: flex!important
  align-items: center
  justify-content: center
  padding: 0
  width: 63px
  height: 63px

  top: 50%
  transform: translateY(-50%)

  font-size: 20px
  color: $text-color-dark
  border-radius: 100%
  border: 1px solid red
  box-shadow: -5px 5px 11px rgba(83, 83, 83, 0.16)
  background: #ffffff
  transition: all 0.5s ease
  z-index: 2
  cursor: pointer

Or both options are correct, it's time to relax?

Answer 1

The size of the arrow goes through font-size: 20px.
It is quite possible that the row height is inherited from somewhere. Set the line height of the arrow to one:
line-height: 1