For that you can just move the icon to a it’s own tag, and set it’s display to block.
<div class="col">
<a href="" class="button button-icon">
<i class="icon ion-ionic my-icon"></i>
Text
</a>
</div>
This way you can control the icons color and size, separate from the text.