Installation & Usage Documentation

1. Install the Component

1. Download and install this asset into your OutSystems environment (O11 – Reactive).

2. After publishing, open your target Reactive application in Service Studio.

3. Go to Manage Dependencies → search for KeenIcons_Font → select and apply dependencies.

2. Include the Stylesheet

The component provides a public CSS file with the font registration. You must include it in your UI layout:

1. Open your Reactive application.

2. Go to UI → Layout / Theme.

3. Under Styles, add reference to the KeenIcons CSS provided by the module.

Once applied, icons will automatically render based on CSS class names.

3. How to Use Icons

Icons are font-based and added using HTML elements with class names:

<span class="icon-home"></span>

4. Selecting Icon Size

Use utility classes to change the scale:

Example:

<span class="icon-user size-3x"></span>

5. Selecting Icon Style

Choose one of four supported visual styles:

Example:

<span class="icon-edit size-2x outline"></span>

6. Demo / Examples

A demo screen is provided (if included in the installation) showing:

• All 315 icons

• Style filters (solid, outline, filled, duotone)

• Size preview

• Copy-to-clipboard class helper

You may open the demo module to explore example usage and UI references.

7. Notes & Recommendations

• Works fully offline (no external CDN or internet dependency)

• Recommended for enterprise and government environments with network restrictions

• To optimize performance, avoid mixing custom icon packs unless required for UX consistency

8. Troubleshooting

If icons do not appear:

1. Confirm CSS from KeenIcons_Font module is referenced in your Layout.

2. Clear browser cache (CTRL+F5).

3. Ensure your block/screen is using the same theme the CSS is attached to.