Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Icon

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
credentials19.19.12
edx-platform2.6.415
frontend-app-account20.28.52
frontend-app-admin-portal20.26.362
frontend-app-authn20.34.020
frontend-app-communications20.28.513
frontend-app-course-authoring20.32.06
frontend-app-discussions20.15.043
frontend-app-enterprise-public-catalog20.29.010
frontend-app-gradebook19.25.412
frontend-app-learner-dashboard20.19.09
frontend-app-learner-portal-enterprise20.31.110
frontend-app-learner-record20.28.44
frontend-app-learning20.28.428
frontend-app-library-authoring20.30.16
frontend-app-ora-grading19.9.014
frontend-app-profile20.32.32
frontend-app-publisher20.28.54
frontend-app-support-tools20.26.04
frontend-lib-content-components20.32.045
frontend-lib-special-exams20.22.43
prospectus20.28.372
studio-frontend3.4.85

Contents

All components (A-Z)