Experimental Design Allow Icons to have a Colored Background

[raquelou]

What

We would like the service type icons with the background colors to become components included in the design system so they can be used in the accordion component.

Purpose

Having the service type icons, with their associated background colors, included in the design system would allow us to use the icons with other components.

Usage

Context or task: On the performance dashboard we display many VA.gov service types and the activities within those service types. The service types are currently displayed without any differentiating imagery. We would like to include the icon in the accordion component to serve as a visual indicator for our users of what service type information is included in the accordion.

Behavior

There are not any special interactions. It is an icon that currently exists in the design system with a colored background which also currently is highlighted in the design system.

Examples

Include any examples you have of this component or pattern.

Accessibility

An aria label associated with the icon would be beneficial

Guidance

This will give additional visual insight into what is associated with a service type

Collaboration Cycle Ticket

Link to your collaboration cycle ticket

Your team

Iterate, Innovate, Run (IIR)

Research (optional)

Include any research you have already conducted, or plan to conduct, on this component or pattern.

Code (optional)

Include any existing code.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

[caw310]

This seems to be a duplicate of your other request. There is information for you in this other ticket that should address both. https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2935

[raquelou]

This request is related to the #2935 ticket but different. I was told that in order to use an icon in the accordion the icon must first exist in the design system as an icon. This ticket is requesting for that to happen. If that is not accurate please let me know.

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rmessina1010 @rsmithadhoc