Accepted answer

the material-ui documentation does not list the standard react (native browser) 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'); }}>


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

enter image description hereenter image description here


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 :


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:

  onclick={() => {
    alert("✔️ this works on every component!");
  click me!

example 2:

onclick possibilities

⬇ play with it online ⬇

edit onclick for every component


you can add an wrapper over the <iconbutton/> to get the onclick event.


render() {
  return <div class="font-icon-wrapper" onclick={this.fonticonclick}>
    <iconbutton iconclassname="muidocs-icon-custom-github" />

this should definitely work...

Related Query

More Query from same tag