Icon
import { Icon } from '@concur/nui-widgets';Icons are either used to decorate a site or application or convey meaning for certain elements within a site or application.
Examples
Available Icons
Use the iconName property to specify which icon to render.
<React.Fragment>
{ICON_CLASSNAMES.map(icon => (
<div className='hig-icon-container' key={icon}>
<Icon
ariaHidden
iconName={icon}
size='lg' />
<div>{icon}</div>
</div>
))}
</React.Fragment>Sizes
Four sizes are supported: 'lg', 'md', 'sm' (the default) and 'xs'. Use the size property to set the size.
<table className='reporttable'>
<thead>
<tr>
<th>Size</th>
<th className='text-center' colSpan={5}>Examples</th>
</tr>
</thead>
<tbody>
<tr>
<td>lg</td>
<td className='text-center'>
<Icon
ariaLabel='Icon air'
iconName='icon-air'
size='lg' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon air rail'
iconName='icon-air-rail'
size='lg' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon success'
iconName='icon-messaging-success'
size='lg' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon warning'
iconName='icon-messaging-warning'
size='lg' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon error'
iconName='icon-messaging-error'
size='lg' />
</td>
</tr>
<tr>
<td>md</td>
<td className='text-center'>
<Icon
ariaLabel='Icon air'
iconName='icon-air'
size='md' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon air rail'
iconName='icon-air-rail'
size='md' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon success'
iconName='icon-messaging-success'
size='md' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon warning'
iconName='icon-messaging-warning'
size='md' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon error'
iconName='icon-messaging-error'
size='md' />
</td>
</tr>
<tr>
<td>sm</td>
<td className='text-center'>
<Icon
ariaLabel='Icon air'
iconName='icon-air'
size='sm' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon air rail'
iconName='icon-air-rail'
size='sm' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon success'
iconName='icon-messaging-success'
size='sm' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon warning'
iconName='icon-messaging-warning'
size='sm' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon error'
iconName='icon-messaging-error'
size='sm' />
</td>
</tr>
<tr>
<td>xs</td>
<td className='text-center'>
<Icon
ariaLabel='Icon air'
iconName='icon-air'
size='xs' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon air rail'
iconName='icon-air-rail'
size='xs' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon success'
iconName='icon-messaging-success'
size='xs' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon warning'
iconName='icon-messaging-warning'
size='xs' />
</td>
<td className='text-center'>
<Icon
ariaLabel='Icon error'
iconName='icon-messaging-error'
size='xs' />
</td>
</tr>
</tbody>
</table>Usage
Properties
| Property | Type | Default | Description |
|---|---|---|---|
iconName | String | Required | The CSS class name of the desired icon. See Available Icons for a complete list. |
ariaLabel | String | Required (unless ariaHidden is true) | Text to describe the icon. The value is placed in the aria-label attribute. |
| Boolean | false | The value for the aria-hidden attribute. Set to true when there is already visible text explaining the icon or the icon is purely for decoration. | |
classNames | String | Custom classes to add to the icon’s <i> tag. | |
size | String | 'sm' | Icon size. Options are 'lg', 'md', 'sm', 'xs'. |