How to make material ui icon clickable and redirect to url

Question

I want to make GitHub icon <GitHubIcon /> clickable and make it redirect to external url, looking in the api it doesn't seem to have link prop ... https://material-ui.com/api/svg-icon/

<div className={classes.root}>
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6" className={classes.title}>
        Made with <FavoriteIcon /> by
        <a href="https://github.com/quiko"><GitHubIcon /></a>  //Not working 
      </Typography>
    </Toolbar>
  </AppBar>
</div>

How is it done usually ??

Answer 1

Add this:

<GitHubIcon onClick={handlePageChange} />

and on the function definition:

const handlePageChange() {
window.location.href="pagelink"
}

or directly using an arrow function:

<GitHubIcon onClick={event =>  window.location.href='pagelink'} />

If looking to add effects on hover with material-ui styles:

---

How to add stlyes on Material-UI:

Import makeStyles:

import { makeStyles } from '@material-ui/core/styles';

Create the class:

const useStyles = makeStyles(theme => ({
  clickableIcon: {
    color: 'green',
    '&:hover': {
    color: 'yellow',
    },
  },
}));

Add the API call on your function declaration:

  const classes = useStyles();

And add this class to your element:

<GitHubIcon 
onClick={event =>  window.location.href='pagelink'} 
className={classes.clickableIcon}
/>

You could also use directly a css file.

I'm not really happy with css styling over material-ui api, specially because this horrible CSS-in-JS syntaxi, but it works well, here you'll find some documentation: Material-ui Styles