Component: Icon 1.1

This builder will allow you to generate a custom version of the Icon component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

icon (attribute)

Icon name: use the name from https://cdn.brand.illinois.edu/icons.html

alt (text attribute)

Alternative text. If omitted, aria-hidden is used

size (text attribute)

Size in CSS value and unit.

Custom CSS Variables and Styles (advanced use only)

Parent style:

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.

Details

A wrapper class to pull the icons from https://cdn.brand.illinois.edu/icons.html

Full Version: 1.1.0

Type: web component

Date Created: 04/21/2025

Version notes:

Github repository: https://github.com/web-illinois/ilw-icon/

Javascript file: https://cdn.toolkit.illinois.edu/ilw-icon/1.1.0/ilw-icon.js

CSS file: https://cdn.toolkit.illinois.edu/ilw-icon/1.1.0/ilw-icon.css

JSON information: ilw-icon.1.1.json