DRAFT DESIGN PENDING IMPLEMENTATION PENDING

What are these tags?

The three statuses above and their possible values:

PROPOSAL STATUS	DESIGN STATUS	IMPLEMENTATION STATUS
DRAFT	DESIGN PENDING	IMPLEMENTATION PENDING
READY FOR REVIEW	DESIGN PLANNED	IMPLEMENTATION PLANNED
APPROVED TO ADD	DESIGN IN PROGRESS	IMPLEMENTATION IN PROGRESS
DEFERRED	DESIGN COMPLETE	IMPLEMENTATION COMPLETE
NEEDS CHANGES

For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal.

Contributors	Gabriel Weinberg
Slack channel
Paragon Jira ticket
Other Jira tickets
Design resources	https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Sharp https://m3.material.io/styles/icons/overview
Technical docs	https://developers.google.com/fonts/docs/material_symbols https://www.apache.org/licenses/LICENSE-2.0.html

Design

https://fonts.google.com/icons?selected=Material+Symbols+Sharp:search:FILL@0;wght@400;GRAD@0;opsz@24&icon.set=Material+Symbols&icon.style=Sharp&icon.size=24&icon.color=%235f6368

🌳 Variants

None

🌞 Best Practices

Do

Continue to add Icons to Paragon Figma on an as-needed basis.

Make sure Icons are sized 24x24 before publishing them to Paragon Figma.

Use the Material Symbols website to configure and download icons as design assets for Paragon Figma.

Don't

Don’t use the old material icons Figma file

Don’t paste icons directly into your Figma designs—use the Paragon library. If you don’t see the icon you want, publish it to the Paragon Figma library first.

♊ Related Components

https://paragon-openedx.netlify.app/foundations/icons/

📐 Specification

What does an engineer need to know in order to build this component?

https://developers.google.com/fonts/docs/material_symbols https://www.apache.org/licenses/LICENSE-2.0.html https://paragon-openedx.netlify.app/foundations/icons/

♒ Behaviors

24x24 is the default size

Can be used in other components such as IconButton, Button, etc.

💕 Accessibility

	Should follow the same guidelines that we have for icons today.

Notes

Notes from collaborator conversations or meetings regarding this component.

Integrate Material Symbols