[FIXED] How to place an closing button on a tab, using Material UI

Issue

I am creating dynamics tabs using ReactJS and Material UI, but I wonder how to place a functional closing tab button directly on the tab.

I mean this:

href="https://i.stack.imgur.com/FdTrH.png" rel="nofollow noreferrer">

And by the way, is there any way to place the icon side by side with the text?

Solution

I tried this and it worked for me:

<Tabs
        value={value}
        onChange={handleChange}
      >
        <Tab label={
          <span>
                    {'Active'}
                    <IconButton size="small" onClick={() => { handle() }}>
                      <CloseIcon />
                    </IconButton>
                  </span>
        } />
        <Tab label="Disabled" disabled />
        <Tab label="Active" />
      </Tabs>

Answered By - assembler
Answer Checked By - - Terry (ReactFix Volunteer)