Paragon Design System

Technical Documentation

Theme

npm_versionnpm Paragon package page

Icon

Edit this pagein a new tabLeave feedbackin a new tab

Displays an svg icon from @edx/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 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.

  • 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-account20.46.36
frontend-app-admin-portal20.46.370
frontend-app-authn20.46.219
frontend-app-communications20.46.213
frontend-app-course-authoring20.46.253
frontend-app-discussions20.44.043
frontend-app-enterprise-public-catalog20.46.310
frontend-app-gradebook20.45.012
frontend-app-learner-dashboard20.46.29
frontend-app-learner-portal-enterprise20.45.422
frontend-app-learner-record20.46.34
frontend-app-learning20.46.031
frontend-app-library-authoring21.5.620
frontend-app-ora-grading20.46.314
frontend-app-payment20.46.21
frontend-app-profile20.46.31
frontend-app-publisher20.46.24
frontend-app-support-tools20.46.07
frontend-component-header-edx21.5.67
catalog-search20.45.02
frontend-lib-content-components21.5.649
frontend-lib-special-exams20.44.03
prospectus20.46.2118
studio-frontend3.4.85
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)