Official Material Design Icon vectors

• 24x24 icons
• must include a non-rendered bounding path ie. <path d="M0 0h24v24H0z" fill="none" />
• viewBox must be "0 0 24 24"
• must not include any fill definitions on the rendered path
• fill color should always be specified using styled-components
• vector paths should be run thru SVGOMG before including here
• use the following eslint override to * allow for the long path line // eslint-disable-next-line max-len
• default wrapper supports 24x24 icon with click and isDisabled support
• if noWrap is true, you must put the icon in a bounding div to size it

From Richard

design goals:

• allow for named icons (see defaultPaths object & paths property)
• allow for custom icons (ie. pass customPaths property)
• allow for icon aliases (ie. shorter names, see defaultPathAliases object)
• allow for completely new icon libraries (ie. override renderIcon method)
• doing this, you could create icons based on an entirely different viewPort (ie. 32x32 or whatever you need)
• allow for onClick (a black-ish color per the Zeplin spec, #292929)
• allow for isDisabled (a grey-ish color per the Zeplin spec, #b1b1b1)
• allow for isBlue (per the Zeplin spec, #006caf)
• allow for custom animations and styles using only styled-components
• allow for non-wrapped icons (ie. they expand to fit their container)

design constraints:

• all icons are by default 24x24
• all icons include a non-rendered 24x24 bounding box in the SVG
• default names are from the Material Design icon spec

https://material.io/tools/icons/?style=baseline ‌