Icon

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-icon
  1. Usage
  2. rh-icon

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-icon/rh-icon.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-icon/rh-icon.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-icon/rh-icon.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-icon/rh-icon.js": "./elements/rh-icon/rh-icon.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

Usage

Loading

Icons load lazily by default, meaning that the browser will not attempt to fetch and render the icon until it scrolls into view. You can change this with the loading attribute, which has three values:

  1. lazy (the default): load icons when they scroll into view
  2. idle: load each icon on the page as soon as the browser enters an idle state Or, on less-capable browsers, at the next frame
  3. eager: each icon will begin to load and render the moment it connects to the DOM.

You might choose to enable eager rendering for "above-the-fold" content, but keep lazy loading for the rest of the page.

rh-icon

Slots 1
Slot Name Description

Slotted content is used as a fallback in case the icon doesn't load
Attributes 4
Attribute DOM Property Description Type Default
set set

Icon set

 
IconSetName | undefined

unknown
icon icon

Icon name

 
IconNameFor<IconSetName> | undefined

unknown
accessible-label accessibleLabel

Defines a string value that labels the icon element. Adds role="img" to element.

 
string | undefined

unknown
loading loading

Controls how eager the element will be to load the icon data

  • eager: eagerly load the icon, blocking the main thread
  • idle: wait for the browser to attain an idle state before loading
  • lazy (default): wait for the element to enter the viewport before loading
 
'idle' | 'lazy' | 'eager' | undefined

'lazy'
Methods 0

None

 Events 3
Event Name Description
load

Fired when an icon is loaded and rendered
set
error

Fired when an icon fails to load
CSS Shadow Parts 1
Part Name Description
fallback

Container for the fallback (i.e. slotted) content
CSS Custom Properties 1
CSS Property Description Default
--rh-icon-size

Override default icon size

 —
Design Tokens 2
Token Copy
--rh-size-icon-01
--rh-size-icon-04
Edit this page on GitHub