Creating a Material-UI tab with image tabs instead of text labels

Question

I'm trying to use the Material-ui tab component for a vertical tab. The problem I am having is how to use an image other than the pre-defined icons rather than a text label?

I tried using an Avatar component, breaking Tab like this:

    <Tab label="Item Two" {...a11yProps(1)}>
      <Avatar alt="test avatar" src="/logo192.png" />
    </Tab>

The Avatar works when I put it in the TabPanel so I know it is right and points to the image correctly, but when I put it in the Tab, as shown above, I get no image, just the "Item Two" label. Is it possible to create a tab with an image using the ButtonBase? I couldn't find any sample of using the ButtonBase. Or do I need to submit a feature request and look elsewhere for now?

Answer 1

I'm not entirely sure if this is what you are asking, but you can pass your own images through the Tab icon property to use them as an icon. They don't have to be Material-UI icons.

<Tab icon={<Avatar alt="test avatar" src="/logo192.png" />} />

const {Tabs, Tab, Avatar} = MaterialUI;

function Demo() {
  const [selected, setSelected] = React.useState(0);

  return (
    <div style={{display: "flex"}}>
      <Tabs
        orientation="vertical"
        value={selected}
        onChange={(_, selected) => setSelected(selected)}
      >
        <Tab icon={<Avatar />} />
        <Tab label="second" />
      </Tabs>
      <div></div>
    </div>
  );
}

ReactDOM.render(<Demo />, document.querySelector("#root"));

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@4/umd/material-ui.production.min.js"></script>
<div id="root"></div>

Answer 2

Ciao, you have this problem because Tab does not support children. Material UI docs says:

This prop (children) isn't supported. Use the component prop if you need to change the children structure.

So you have to use component props, for example in this way:

<Tab
   label="Item One"
   {...a11yProps(0)}
   value={value}
   component={() => (
      <Button onClick={() => setValue(0)}> // this button to select the Tab (the first one in this case) when you click the Avatar 
         <Avatar src="<an image>" />   // Avatar here
      </Button>
   )}
/>

Here a codesandbox example.