Icon
Icons represent concepts and add context to options and actions.
The <auro-icon> element can show any icon in the Auro icon library. Set the icon's category and name.
Use cases
Use <auro-icon> when people:
- Benefit from an icon that adds context to nearby text
- Need to quickly recognize an action or option by its icon
- Rely on visual cues to find their way around an interface
Install
$ npm i @aurodesignsystem/auro-iconDefine dependency in project
Import the component in each project that uses <auro-icon>.
import "@aurodesignsystem/auro-icon";Use CDN
If your project can't process JS assets, use the pre-processed assets. Legacy browsers, such as IE11, aren't supported.
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm"></script>Basic example
<auro-icon category="interface" name="pin-trip-filled">Your trip starts here</auro-icon>Custom component registration for version management
Every Auro component has two key parts: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
Installing the component as described in the Install section imports the class and registers the component globally for you.
However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), register the class manually under a custom element name to avoid conflicts.
To do this, import only the component class and call the register(name) method with a unique name:
// Import the class only
import { AuroIcon } from '@aurodesignsystem/auro-icon/class';
// Register with a custom name if desired
AuroIcon.register('custom-icon');This creates a <custom-icon> element that works the same as <auro-icon> and doesn't conflict with it on the same page.
<custom-icon category="interface" name="pin-trip-filled">Your trip starts here</custom-icon>