I had the same problem yesterday. I resolved it with a little bit of a work around. Like you said, when you want to center the icon with text-align:center; it ends up more to the right. If you put it to the left, it aligns left as intended. So I made the speudo element exactly the same width as the icon and centered the speudo element with margin: 0 auto; In that case you can leave the text-align to the left.
I know it's not the perfect solution, but for now it works for me and maybe also for you.