Displays an svg icon from @openedx/paragon/icons. See Icons Foundation Documentation for a list of all available icons.
Basic Usage
Any Paragon component or export may be added to the code example.
With HTML attributes
HTML attributes can be passed to this component allowing for customization of the color, size, or addition of any necessary ARIA attributes.
Any Paragon component or export may be added to the code example.
Theme Variables#
| CSS Variable | Computed Value |
|---|---|
| | |
| | |
| | |
| | |
| | |
Props API#
- src
elementTypeDefaultnullAn icon component to render. Example import of a Paragon icon component:
import { Check } from '@openedx/paragon/icons'; - svgAttrs
shape{aria-label:string,aria-labelledby:}string,Default{}HTML element attributes to pass through to the underlying svg element
- id
stringthe
idproperty of the Icon element, by default this value is generated with thenewIdfunction with theprefixofIcon. - size
enum'xs' | 'sm' | 'md' | 'lg'The size of the icon.
- className
stringA class name that will define what the Icon looks like.
- hidden
boolDefaulttruea boolean that determines the value of
aria-hiddenattribute on the Icon span, this value istrueby default. - screenReaderText
string|elementa string or an element that will be used on a secondary span leveraging the
sr-onlystyle for screenreader only text, this value isundefinedby 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 analtattribute would be used forimagetags.
Usage Insights#
Icon
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| edx-platform | 2.6.4 | 15 | |
| frontend-app-account | 22.10.0 | 6 | |
| frontend-app-admin-portal | 21.13.1 | 107 | |
| frontend-app-authn | 22.11.2 | 19 | |
| frontend-app-communications | 22.7.0 | 13 | |
| frontend-app-course-authoring | 22.8.1 | 163 | |
| live | 22.8.1 | 1 | |
| xpert_unit_summary | 22.8.1 | 3 | |
| frontend-app-discussions | 22.7.0 | 45 | |
| frontend-app-enterprise-public-catalog | 21.13.1 | 13 | |
| frontend-app-gradebook | 22.8.1 | 12 | |
| frontend-app-learner-dashboard | 22.9.0 | 7 | |
| frontend-app-learner-portal-enterprise | 21.13.1 | 37 | |
| frontend-app-learner-record | 22.10.0 | 4 | |
| frontend-app-learning | 22.10.0 | 35 | |
| frontend-app-library-authoring | 21.11.3 | 20 | |
| frontend-app-ora-grading | 21.11.3 | 14 | |
| frontend-app-payment | 22.9.0 | 1 | |
| frontend-app-profile | 22.10.0 | 1 | |
| frontend-app-publisher | 21.13.1 | 4 | |
| frontend-app-support-tools | 21.13.1 | 27 | |
| frontend-component-header-edx | 21.13.1 | 6 | |
| frontend-component-header | 22.10.0 | 1 | |
| catalog-search | 21.13.1 | 2 | |
| frontend-lib-special-exams | 22.7.0 | 3 | |
| prospectus | 20.46.2 | 104 | |
| studio-frontend | 3.4.8 | 5 |