6

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

Alexander
  • 1,288
  • 5
  • 19
  • 38
  • 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://stackoverflow.com/q/45046030/4636715 – vahdet Dec 26 '19 at 12:23
  • @vahdet 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? – Alexander Dec 26 '19 at 12:29
  • 1
    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 :) – vahdet Dec 26 '19 at 12:34
  • Simply wrap your icon within an anchor tag ``. – mgarcia Dec 26 '19 at 12:36
  • @vahdet I simply copied the code you added to the answer :X – Alexander Dec 26 '19 at 12:39

3 Answers3

9

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

yuri
  • 3,182
  • 2
  • 16
  • 26
1

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;"" >
Ankit Soni
  • 19
  • 2
0

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>
Reza
  • 18,865
  • 13
  • 88
  • 163