Icon Component

The Icon component is a presentation component that lets you display an icon to the learner.

This article provides an overview of the Icon component, component setup, and examples of different configurations.

Component overview

The Icon component is suitable for displaying an icon to the learners. As needed, the icon can be presented together with some additional text. The Icon component is flexible and can either display an icon or an uploaded image to the learner.

The Icon component is fully responsive and can also be read by screen readers.

Component set up

Follow these steps to add the Icon component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Icon component.
3. Click the Icon component and select Add Left, Add Full, or Add Right .

Click the Edit Component icon on the newly added Icon component to begin set up.

General section

In the General section, add Icon Title, or an Icon Display Title, as needed. Icon Display Title is seen by learners.

Scroll down and add Icon Body. Use the text editor to style and format your text, as needed.

1. Add Icon Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Icon component that can display an icon and label prior to the Icon component completion, which changes to a different icon and label once the Icon component is completed.

Add Icon

1. In the Icon section, you Select Icon for the Icon component.
2. Select an Icon Image to use as an icon.

Heads up!

If Icon Image is selected, the Icon Image will be used instead of the chosen icon.

Scroll down and enter Icon Title and set Icon Title Settings, as needed.

1. Add Icon Body, as needed. Use the text editor to style and format your text, as needed.
2. Enter Icon Aria Label for the icon, as needed.

Component Examples

The Icon component gives you a lot of flexibility. Below are examples that illustrate different Icon component setups:

Example 1 – Icon component displaying an icon and with an Icon Title and Icon Body text below.

Example 2 – Icon component displaying an Image used as an icon.

Appearance

In the Appearance section, you set Icon Color, Icon Alignment, and Icon Size, as needed.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.