How to align horizontal icon and text in Material-UI

Question

I am a newbie in material-ui, now my icon and text are not aligned :

My desired results:

Answer 1

Same problem here, this is what I did.

import LinkIcon from '@material-ui/icons/Link';
import styled from 'styled-components';
...
const Resolve = styled.div`
  display: flex;
  vertical-align: middle,
`;


  
  
resolve

If you aren't happy with mUI default link icon you can always DIY:

{/* this is the same chained icon used in the own material-ui, 
idk why this ins't avaiable yet */}

function CustomLinkIcon(props) {
  return (
    
      
    
  );
}
...

  
  
resolve