Paragon Design System

Theme

Imagery & Iconography
npm_versionnpm Paragon package page

Icon

Edit this pagein a new tabLeave feedbackin a new tab

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 (SCSS)#

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

Props API#

Icon Props API
  • src elementType

    An icon component to render. Example import of a Paragon icon component: import { Check } from '@openedx/paragon/icons';

    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.

  • size enum'xs' | 'sm' | 'md' | 'lg'

    The size of the 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.

Usage Insights#

Icon

Project NameParagon VersionInstance Count
edx-platform2.6.415
frontend-app-account22.0.06
frontend-app-admin-portal21.13.193
frontend-app-authn22.7.019
frontend-app-communications22.0.013
frontend-app-course-authoring22.6.1119
live22.6.11
xpert_unit_summary22.6.13
frontend-app-discussions22.1.143
frontend-app-enterprise-public-catalog21.13.113
frontend-app-gradebook22.1.112
frontend-app-learner-dashboard22.7.09
frontend-app-learner-portal-enterprise21.13.128
frontend-app-learner-record22.7.04
frontend-app-learning22.3.037
frontend-app-library-authoring21.11.320
frontend-app-ora-grading21.11.314
frontend-app-payment22.1.11
frontend-app-profile22.6.11
frontend-app-publisher20.46.34
frontend-app-support-tools20.46.06
frontend-component-header-edx21.11.46
frontend-component-header22.7.01
catalog-search21.13.12
frontend-lib-content-components22.0.051
frontend-lib-special-exams22.2.03
prospectus20.46.2104
studio-frontend3.4.85
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)