Keen HTML Pro theme's keenthemes icon names are inconsistent with the icon itself

Keen HTML Pro’s icon naming can definitely be confusing when the class name doesn’t seem to match the icon that actually appears. It’s worth checking the KeenIcons reference and the generated CSS/font files, since missing or mismatched icon classes can sometimes come from the bundled assets rather than the HTML itself. For a different topic, you can also check out Ingenuity.

All documentations' icons and some live demos/docs are broked/down. I don't, but it looks like the owner of the Keen Theme is ignoring the old themes and focous just in Mecatronic... Unfortunately

Hi there,

Understanding

You're reporting that KeenIcons icon names in the documentation don't match the actual icon previews, making it impossible to use the correct icons in your application.

Solution

This is a known bug in Metronic v8 (confirmed in v8.3.2 and v8.3.3). The issue affects exactly 3 icons out of the full KeenIcons set:

| Icon name shown in HTML/docs | Actual CSS class in bundle | |---|---| | ki-plus-square | ki-plus-squared | | ki-minus-square | ki-minus-squared | | ki-check-square | ki-check-squared |

The CSS defines these classes with a "d" suffix (-squared), but the HTML templates and docs reference them without the "d" (-square). This mismatch causes the icons to render as invisible 0x0 elements.

Workaround: Add "d" to the class names in your HTML:

• ki-plus-square → ki-plus-squared
• ki-minus-square → ki-minus-squared
• ki-check-square → ki-check-squared

All other -square icons (like ki-trash-square, ki-book-square, etc.) are fine — only these 3 are affected.

Sources

• This is a documented issue in our internal tracker. The fix requires alignment between the KeenIcons CSS generation and HTML template generation.

Next Steps

This requires our development team's expertise to fix at the source level. I'll escalate this to our technical specialists who can provide detailed guidance on when the CSS bundle naming will be corrected.

In the meantime, use the workaround above to get your icons displaying correctly.

This reply was generated by AI. A human will follow up if needed.