Icon

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-icon/rh-icon.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-icon/rh-icon.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@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": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-icon/rh-icon.js';
</script>
Copy to Clipboard Wrap lines

Usage

<rh-icon icon="hat"></rh-icon>

<script type="module">
  import "@rhds/elements/rh-icon/rh-icon.js";
</script>
Copy to Clipboard Wrap lines

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 icon="alert" loading="eager"></rh-icon>

rh-icon

Icons represents general concepts and can support text as a decorative element. The icon element is a container that allows users to add icons of varying dimensions in the same area without shifting surrounding content.

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