vertical-align: middle

text is centered just like button's height, and the text is vertically centered in button.
to align the bottom of the text with the bottom of the text, it's best to make the text and icon look the same size.
I often use float positioning. You can also use flex layout

to vertical-align: middle the I tag to see if it works

set a height, for button and the same line-height for text

    <style>
        button {
            height: 100px;
        }

        span {
            line-height: 100px;
        }
    </style>
    <button>
        <span></span>
        <i class="material-icons">
            favorite_border
        </i>
    </button>

my usual method is to set position:relative; top:3px; directly to this I tag