React icon does not align with text

Question

I have a very simple question, I have react icon and text in front of it. The text is not aligned with the React Icon. How can I align it with text? Check the screenshot. My code is:

<MdPerson size={20}/><span> Profile</span>

screenshot

Answer 1

Try to wrap icon component and your span label with outer div block. Then apply some class to the div where child elements aligned by flexbox.

.centered-label {
  display: flex;
  align-items: center;
}