You can add an wrapper over the <IconButton/> to get the onClick event.

Example

render() {
return <div class="font-icon-wrapper" onClick={this.fontIconClick}>
<IconButton iconClassName="muidocs-icon-custom-github" />
</div>
}

This should definitely work...

Just add onClick to the props you pass down into <IconButton />.

Props that are not cited in the doc are passed down into their internal <EnhancedButton /> component which will handle onClick just fine.

See here : https://github.com/callemall/material-ui/blob/master/src/IconButton/IconButton.js#L241

The Material-UI documentation does not list the standard React (native browser) events:

https://facebook.github.io/react/docs/events.html#mouse-events

This is because it's expected that you are already aware of the available native events. For example, you can also use onWheel. It would be a long and redundant list if all the native events were included.

As kouak explains, other props (such as onClick) are passed down to a relevant child component.

Random example:

<Button color="primary" onClick={() => { console.log('onClick'); }}>
Primary
</Button>

Remember, you can use onClick in every singe component that have a DOM renderer since it is a native React event (It doesn't have to be a button component).

Example 1:

<Paper
className={classes.paper}
onClick={() => {
alert("✔️ This works on every component!");
}}
>
Click me!
</Paper>

Example 2:

⬇ Play with it online ⬇

Handling clicks

All components accept an onClick handler that is applied to the root DOM element.

<Button onClick={() => { alert('clicked') }}>Click me</Button>

Note that the documentation avoids mentioning native props (there are a lot) in the API section of the components. API for Button

We should alway have to provide onClick event to parent because sometimes depends on browser, events might not work if we provided in to the child componet.

Example:

Error:

<TextField
label={label}
value={state.inputValue}
InputProps=\{\{
endAdornment: (
<InputAdornment position='end'>
<IconButton style=\{\{ padding: '3px' }}>
{state.inputValue?.length > 1 ? (
<ClearIcon onClick={handleClear}/>
) : (
<DateRangeIcon onClick={onAdornmentClick}/>
)}
</IconButton>
</InputAdornment>
),
}}
/>

Solution:

<TextField
label={label}
value={state.inputValue}
InputProps=\{\{
endAdornment: (
<InputAdornment position='end' onClick={state.inputValue?.length > 1 ? handleClear : onAdornmentClick}>
<IconButton style=\{\{ padding: '3px' }}>
{state.inputValue?.length > 1 ? (
<ClearIcon/>
) : (
<DateRangeIcon/>
)}
</IconButton>
</InputAdornment>
),
}}
/>