Integrate Material Symbols

Owned by Gabriel Weinberg, created
Last updated: May 15, 2024
1 min read

READY FOR REVIEW Design COMPLETE IMPLEMENTATION PENDING

The three statuses above and their possible values:

PROPOSAL STATUS

DESIGN STATUS

IMPLEMENTATION STATUS

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 Contribution Process | Step 1 – 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

1 Variants | 2 Best Practices | 3 Related Components | 4 Specification | 4.1 Behaviors | 4.2 Accessibility | 5 Notes

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.

What will it take to make this happen technically?

It is a much larger library and creates build performance issues in netlify.

Technical discovery needed to understand build issues better and find a solution