How can the text be centered horizontally and vertically when there is a < I > on the button side?

<button> <i class="material-icons">
        favorite_border
        </i></button>

I use Google"s material icon
just to make my text appear below, and icon gets big

how to center its text vertically?

Button css3 css css3-Animation google

Mar.22,2021

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

Previous: Cannot resolve zipkin

Next: React code enables ESlint check and keeps reporting to error