Icons

Best Practices

Decorative icons

These icons are purely visual, for decoration or branding. If removed, the context of the page would still be understandable without a decorative icon. Decorative icons do not need to be read by assistive devices. If an icon is decorative, do not include the title prop to EzIcon, the aria-hidden=true attribute will be added for you.

Semantic icons

Semantic icons communicate meaning. Semantic icons can be used on their own without text, as abbreviations, or in the context of interactive controls like buttons. For semantic icons, the meaning needs to be read by assistive devices. If an icon is semantic, include the title prop with a meaningful value to EzIcon.

Examples

Font Awesome Icon

To use Font Awesome icons:

1. Install only the relevant icon packages you want to use in your project, if not already installed. There are multiple free packages and pro packages, you may not need all of them. The pro packages require an extra configuration step.
2. Import the icon you want to use from the corresponding package.
3. Pass the icon to the icon prop in EzIcon.

No need to install @fortawesome/fontawesome-svg-core or @fortawesome/react-fontawesome, Recipe handles those.

ezCater Icon

To use ezCater icons:

1. If not already installed, install the ezCater icon package.
2. Import the icon you want to use from @ezcater-icons.
3. Pass the icon to the icon prop in EzIcon.

SVG Icon

In the case that you cannot find what you need from Font Awesome or ezCater icon packages, the fall back option is to pass EzIcon an <svg> to the icon prop. SVG elements should be scaled for a 24 x 24px viewport.

Icon color

By default, the icon color is the same as the body text. If you want to specifiy a color, use the color prop. We currently support theme palette properties (primary, secondary, error, warning, info, and success) as well as all supported theme colors (ex. common.primary100).

Icon size

By default, the icon size is inherited from the parent container. If you want to specify a size, use the size prop. We currently support small, medium (default), large, xlarge, and inherit. Font sizes for each icon size are specified in the theme.