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

You can do something similar as well

export default function App() {
  return (
    <div className="App">
      <img
        src="https://www.tenforums.com/geek/gars/images/2/types/thumb_14486407500Folder.png"
        alt=""
        onClick={handleClick}
        id="secret_folder"
      />
    </div>
  );

  function handleClick(e) {
    if (e.target.id === "secret_folder") {
      console.log("you clicked");
    }
  }
}