w 16 linijce użyłeś block zamiast flexboxa na rodzicu ikonki, dlatego nie działa Ci wyśrodkowanie poprzez mx-auto
ogólnie jak nie ogarniasz dlaczego tak się dzieje, że np w blockach mx-auto działa a we flexach nie działa to poczytaj trochę o Box Model oraz jak działają poszczególne właściwości display i jakie tagi są domyślnie inline a jakie block.
jeśli chodzi o dalszą część pytań to możesz też wyśrodkować elementy używając:
display: inline-block; oraz text-align: center;
display: flex; oraz justify-content: center;
display: block; z ustawioną szerokością oraz margin-left: auto; margin-right: auto;
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
https://codepen.io/Tnifey/pen/OdMJvZ
etc i jeszcze https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment :)
za czasów css2 i html 4.* był jeszcze tag <center> którego już się nie używa :)
oraz do ćwiczenia flexboxa masz tu https://flexboxfroggy.com/#pl