Add icons for the mobile app

[jessicawoodin]

What

The mobile app team would like to add 6 Material icons to the VADS sprite to replace the old FontAwesome icons. A similar icon was not found in the existing VADS or USWDS icon collections.

Purpose

Currently, the mobile app is still using FontAwesome icons. By adding these icons, we’ll be able to fully migrate to the new VADS/USWDS/Material icons. Also, these icons could potentially be used on the web in the future.

Usage

• circle - used as dot indicator for unread messages
  

• crop_square - used for bullets
  

• inbox - used when moving message to inbox folder
  

• local_shipping - used for prescription tracking
  

• refresh - used to refresh webview template
  

• smartphone - used to start text message
  

Behavior

None

Examples

Screenshots included above.

Accessibility

None

Guidance

None

Your team

Mobile app design system team (submitted by @jessicawoodin and @narin)

Research (optional)

N/A

Code (optional)

No code necessary, but presumably .svgs would need to be added to the icons folder of dst-uswds-compile, a new sprite would need to be generated, added to component-library, and released to NPM

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.

[humancompanion-usds]

@danbrady - Can you pull these icons in as well during our iconpalooza swarm?

[danbrady]

Ok, I've added the local_shipping and refresh icons to Figma DS. (phone_iphone can be used for smartphone.) Here is the dev issue to track when these are added to va-icon.

Per discussion with @humancompanion-usds, we didn't add the square and circle. We will be moving away from squares for bullets in the near future. Also, the circle as a status indicator is currently going through the exploratory phase so guidance isn't quite there yet.

[danbrady]

Follow up issues:

• Dev ticket to add to va-icon
• Add to guidance site