[BUG] Icon not working for devtools panel

[maybebansky]

What happened?

I'm creating a devtools panel. This is working however when I try to add an icon it doesn't show up.

I need the icon to be next to the panel name as it is for "Components" and "Profiler" here:

This is my devtools.tsx. Commented out are the different paths that Ive tried (Ive tried having the icon within the assets folder and also in the project root):

import projectHtml from "url:./panels/project/index.html"

// import panelIcon from "url:~/assets/icon16.png"
// import panelIcon from "./icon32.png"
// import panelIcon from "url:./assets/icon16.png"
// import panelIcon from "./assets/icon16.png"
// import panelIcon from "icon16.png"
import panelIcon from "./assets/icon32.png"

chrome.devtools.panels.create(
  "Test Project",
  panelIcon,
  // See: https://github.com/PlasmoHQ/plasmo/issues/106#issuecomment-1188539625
  projectHtml.split("/").pop()
)

function IndexDevtools() {
  return (
    <div>
    </div>
  )
}

export default IndexDevtools

I'm not seeing any errors in the terminal when I build the extension so unsure how to debug this.

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

• [ ] I would like to fix this BUG via a PR

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[JustinGrote]

At least for edge, you have to split the path for the same reason that // See: comment exists.