Icon
Displays an svg icon from @openedx/paragon/icons
. See Icons Foundation Documentation for a list of all available icons.
Basic Usage
// Included in this live jsx scope:
// import { Add, AddCircle } from '@openedx/paragon/icons';
<Icon src={Add} />
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.
// Included in this live jsx scope:
// import { Add, AddCircle } from '@openedx/paragon/icons';
<div className="d-flex align-items-center bg-dark">
<Icon src={Add} className="mx-3 text-white" />
<Icon src={Add} className="mx-3 text-white" size="xs" />
<Icon src={Add} className="mx-3 text-white" size="sm" />
<Icon src={Add} className="mx-3 text-white" size="md" />
<Icon src={Add} className="mx-3 text-white" size="lg" />
<Icon src={Add} className="text-white" style={{ height: '48px', width: '48px' }} />
</div>
Dependencies
Repository | Usage Count |
---|---|
frontend-app-staff-dashboard | 20 |
frontend-app-dashboard | 8 |
frontend-app-course-authoring | 7 |
frontend-app-authn | 1 |
frontend-app-discussions | 8 |
frontend-app-learning | 9 |
Detailed usage locations:
frontend-app-staff-dashboard
src/components/CourseCard.jsx
src/components/CourseExploreCard.jsx
src/components/DocumentCard.jsx
src/components/EventCard.jsx
src/components/Support.jsx
src/components/VideoCard.jsx
src/pages/access-denied/index.jsx
src/pages/calendar/EventDrawer.jsx
src/pages/calendar/index.jsx
src/pages/create-program/index.jsx
src/pages/error/index.jsx
src/pages/home/AiHome.jsx
src/pages/library/index.jsx
src/pages/program-single/ProgramSingle.jsx
src/pages/program-single/attendance/index.jsx
src/pages/program-single/enrollment/EnrollDrawer.jsx
src/pages/program-single/program-team/AddUserDrawer.jsx
src/pages/users/AddUsersDrawer.jsx
src/pages/utilities/notifications/NotificationsDrawer.jsx
src/pages/view-ticket/TicketHeader.jsx
frontend-app-dashboard
src/components/CourseDropdownCard.jsx
src/components/CourseExploreCard.jsx
src/components/EventCard.jsx
src/components/Notes.jsx
src/pages/calendar/EventDrawer.jsx
src/pages/calendar/index.jsx
src/pages/home/AiHome.jsx
src/pages/support/view-ticket/TicketHeader.jsx
frontend-app-course-authoring
src/attendance/index.jsx
src/course-overview/index.jsx
src/enrollments/EnrollDrawer.jsx
src/error/index.jsx
src/generic/datepicker-control/DatepickerControl.jsx
src/generic/drag-helper/SortableItem.jsx
src/generic/tag-count/index.jsx
frontend-app-authn
src/login/LoginPage.jsx
frontend-app-discussions
src/components/Search.jsx
src/components/TopicStats.jsx
src/discussions/common/EndorsedAlertBanner.jsx
src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx
src/discussions/learners/learner/LearnerFooter.jsx
src/discussions/posts/post/PostHeader.jsx
src/discussions/posts/post/PostSummaryFooter.jsx
src/discussions/posts/post-editor/PostEditor.jsx
frontend-app-learning
src/course-home/outline-tab/Section.jsx
src/course-home/outline-tab/SequenceLink.jsx
src/course-home/outline-tab/widgets/DateCard.jsx
src/course-home/outline-tab/widgets/FlagButton.jsx
src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx
src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
src/courseware/course/CourseBreadcrumbs.jsx
src/courseware/course/sequence/content-lock/ContentLock.jsx
src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx