Browser extension (non-production) icon is not visible in high contrast "High Contrast Black" mode

[DaveTryon]

trafficstars

Describe the bug

This is closely related to #4516, which was recently fixed for prod. Unfortunately, that change included only the prod icon and left the other icons untouched.

Can we possibly get new icons for the non-production icons?

To Reproduce Steps to reproduce the behavior:

1. Install a non-prod version of the web extension
2. Pin them to the command bar
3. Enable High Contrast Black vis settings
4. Look at the icons--if ambitious, run color contrast tools

CodePen repro example

Expected behavior

Screenshots

What it look like (zoomed) in HC black when I have all 3 non-prod versions:

It's almost as bad in dark mode (non-high contrast), especially Insider mode if there's a mouse hover, as shown here:

Context (please complete the following information)

• OS Name & Version: Windows 10 21H2
• AI-Web Version & Environment: Current bits
• Browser Version: Chrome 103.0.5060.134

Are you willing to submit a PR?

Did you search for similar existing issues?

Additional context

[ghost]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[ghost]

This issue requires additional investigation by the Accessibility Insights team. When the issue is ready to be triaged again, we will update the issue with the investigation result and add "status: ready for triage". Thank you for contributing to Accessibility Insights!

[ferBonnin]

we need to get new images from design team for these icons too

[ferBonnin]

for consistency, lets also ask for playground

[DaveTryon]

@nang4ally, we just need to get revised artwork for Insider, Canary, and Dev artwork. We did this for prod with #4516. You can see exactly what the icon changes were at https://github.com/microsoft/accessibility-insights-web/pull/5652/files

[DaveTryon]

This was released with 2.39.0