Building a button only with image in React

Question

I've spent two days trying to figure out how to create a button with image in React but so far not able to achieve something shown below.

Screenshot of what I'm trying to achieve -- Files and Folders there are clickable buttons:

I'm willing to use MUI or even better if this can be done using plain react. Appreciate if anyone can show me how this can be done.

Answer 1

Use This Code

import Button from '@mui/material/Button';

export default function App() {
  return (
    <>
    <Button variant="text" size="small" style={{display: "flex", flexDirection: "column"}}>
      <img src="https://www.tenforums.com/geek/gars/images/2/types/thumb_14486407500Folder.png" width="100" alt="folder"/>
      <label>Pictures</label>
    </Button>
    </>
  );
}