Skip to main content

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​

RepositoryUsage Count
frontend-app-staff-dashboard20
frontend-app-dashboard8
frontend-app-course-authoring7
frontend-app-authn1
frontend-app-discussions8
frontend-app-learning9

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