Icon

import "@rhds/elements/rh-icon/rh-icon.js";

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

import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Icon icon="hat" />
);

import "@rhds/elements/rh-icon/rh-icon.js";

<rh-icon set="ui" icon="arrow-down" accessible-label="Page down"></rh-icon>

<rh-icon icon="info" aria-labelledby="info" role="img"></rh-icon>
<span id="info">Information</span>

import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Icon set="ui" icon="arrow-down" accessible-label="Page down" />
  <Icon icon="info" aria-labelledby="info" role="img" />
  <span id="info">Information</span>
);

import "@rhds/elements/rh-icon/rh-icon.js";
import "@rhds/elements/rh-button/rh-button.js";
const icon = document.querySelector('rh-icon');
const btn = document.getElementById('remove');

btn.addEventListener('click', () => {
  icon.removeAttribute('icon');

});

<rh-icon icon="hat"></rh-icon>
<rh-button id="remove">Remove Icon</rh-button>


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

import { Button } from "@rhds/elements/react/rh-button/rh-button.js";
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Icon icon="hat" />
  <Button id="remove">Remove Icon</Button>
  <Icon icon>test</Icon>
);