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

Question

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

Intendancy

There are many ways. You can also display that icon in a button, And buttons are clickable by their nature. Anyways, if you decide to do some action onClick make use of target=_blank attribute for showing a new tab like https://mcmap.net/q/166412/-maintaining-href-quot-open-in-new-tab-quot-with-an-onclick-handler-in-react/4636715 – Moulding

@Moulding I've seen this solution, but if I use for example www.google.com, I get a new window with localhost.www.google.com, how do I fix it? – Intendancy

I think you should share your current code and narrow your question to that prefixed-localhost thing. Otherwise, it would become a chat here when we try to solve the problem steo by step. That's for good :) – Moulding

Simply wrap your icon within an anchor tag <a>. – Scathing

@Moulding I simply copied the code you added to the answer :X – Intendancy

Answer 1

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

Valiancy

<IconButton href="https://linkedin.com" /> should work in most use cases. see: github.com/mui-org/material-ui/issues/6243 – Mastodon

Answer 2

you can use href on Button or IconButton

import { Icon, IconButton } from "@mui/material";

          <IconButton href={app.url} aria-label="launch" color="primary" target="_blank">
                    <Icon baseClassName="material-icons" >launch</Icon>
          </IconButton>

Quicksilver

Answer 3

there is two way which can help you

1. you can use tag insert icon into tag and give href="(URL)" as an attribute into tag
2. you can also use JavaScript onclick function like example below https://www.Linkedin.com=' + this.selectedIndex;"" >

Nessim