Search code examples
reactjsmaterial-uihref

How to make Material UI icon to act like anchor tag?

I have this Icon from material UI, I wish to make it clickable and open a new window to www.linkedin.com

should I use href="Linkedin.com" ? or add onClick ? I wish it to open a new tab/window aswell

Solution

  • This should do using Material-UI Icons:

    import LinkedInIcon from '@material-ui/icons/LinkedIn';
import IconButton from '@material-ui/core/IconButton';

<IconButton aria-label="Linkedin.com" onClick={() => window.open('https://www.Linkedin.com')}>
  <LinkedInIcon fontSize="large" />
</IconButton>

    To open a new page:

    onClick={() => window.open(newPageUrl, "_blank")}

    To open on the same one:

    onClick={() => window.location.replace(newPageUrl)}

    CodeSandBox