How to overcome different rendering of align-item property in firefox and chrome?

Question

css

There is such a problem, I embed an icon in the svg buttons, it has a property display: inline-flex; align-items: center;
. In chrome, everything is centered normally, and in FireFox the inscription is shifted to the end of the block, as if flex-end.
What is the problem, and how to overcome it?

UPD: Link to PEN

Screenshots

Хром
Лиса

Answer 1

just trydisplay: flex