center text and icon in a anchor tag

I'm a beginner at web dev. I want to make a button that has one text and one icon on two separate lines. Since the button is rectangular, I want the text and the icon to be both vertically and horizontally centered to make them look pretty. How should I do about this? Thank you.

HTML:

<div class="wrapper">
  <a href="test1.html" class="btn typeA">
    <span>ABC <br>
      <img src=".." alt="icon" style="width:60px;">
    </span>
  </a>
</div>

CSS:

.typeA{
    width: 80%;
    height: 90%;
    margin:0 auto;
    display: flex;
    justify-content: center;
}

.typeA span{
    display: inline-block;

}