Icon

Displays an svg icon from @edx/paragon/icons. See Icons Foundation Documentation for a list of all available icons.

HTML attributes can be passed to this component allowing for customization of the color, size, or addition of any necessary ARIA attributes.

Theme Variables (SCSS)#

// Icons sizes

$icon-inline: .8em !default;
$icon-sm: 1.25rem !default;
$icon-md: 1.5rem !default;
$icon-lg: 1.75rem !default;

Icon Props API

src element | func
An icon component to render. Example import of a Paragon icon component: import { Check } from '@edx/paragon/dist/icon';
Defaultnull
svgAttrs shape {
aria-label: string,
aria-labelledby: string,
}
HTML element attributes to pass through to the underlying svg element
Default{}
id string
the id property of the Icon element, by default this value is generated with the newId function with the prefix of Icon.
className string
A class name that will define what the Icon looks like.
hidden bool
a boolean that determines the value of aria-hidden attribute on the Icon span, this value is true by default.
Defaulttrue
screenReaderText string | element
a string or an element that will be used on a secondary span leveraging the sr-only style for screenreader only text, this value is undefined by default. This value is recommended for use unless the Icon is being used in a way that is purely decorative or provides no additional context for screen reader users. This field should be thought of the same way an alt attribute would be used for image tags.