Icon Component
Outline
This component is suitable for use when creating accessible courses.
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
To add this component, follow the steps in this article:
Intellum
Add a Component
Explore everything there is to know about Evolve. This collection begins with the basics of Evolve and completes with information on the tool's more advanced features. Feel free to start from the beginning or hop around to the specific section that suits your needs.
The Property Panel for the newly added component will then open automatically for you to customize set-up.
Or click anywhere on an existing component to open the Property Panel.
General section
In the General section, add Title, or an Display Title, as needed. Display Title is seen by learners.
Scroll down and add Body. Use the text editor to style and format your text, as needed.
- Add Instruction Text that tells users how to use the component.
- 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. This widget 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
- In the Icon section, you Select Icon for the Icon component.
- Select an Icon Image to use as an icon.
Note: 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.
- Add Icon Body, as needed. Use the text editor to style and format your text, as needed.
- 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.