The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro

Icon Bug on Docs site


On the docs website, icons are not displaying correctly.

https://preview.keenthemes.com/html/metronic/docs/?page=icons/keenicons#listing
https://preview.keenthemes.com/html/keen/docs/?page=icons/keenicons#listing


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

Hi Harold,

Understanding

You're looking at the KeenIcons listing page on preview.keenthemes.com, which is the legacy Metronic v8 (Bootstrap) docs preview. This preview server is still accessible but no longer actively maintained.

The icons not displaying is a known issue with KeenIcons in Metronic v8. There are actually two separate bugs causing it:

1. CSS Class Naming Mismatch (3 icons)

Three icon classes have a mismatch between the HTML templates and the CSS bundle:

| HTML uses | CSS defines | |---|---| | ki-plus-square | ki-plus-squared | | ki-minus-square | ki-minus-squared | | ki-check-square | ki-check-squared |

The CSS file defines these with a "d" suffix (ki-plus-squared) but the HTML references them without (ki-plus-square). The ::before pseudo-element gets content: none, so the icons render invisible.

This also affects accordion toggle icons which use ki-plus-square and ki-minus-square.

Workaround: Replace the class names in your project files:

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

Everything else (child elements, other classes) stays the same.

2. Missing Icons from CSS Bundle (31 icons)

A separate issue: 31 icons listed on the KeenIcons docs page have no CSS rules at all in plugins.bundle.css. This means they simply won't render regardless of naming. The full list includes icons like ki-gear, ki-send, ki-scooter, ki-triangle, among others.

Status

Both issues are source-level build pipeline bugs. The naming bug has been documented and escalated to our development team for the next release. The missing icons issue is a separate tracking item.

Sources

If you're working on a project using Metronic v8, applying the class rename workaround above will fix the 3 naming-bug icons. For the missing 31 icons, you'll need to use alternative KeenIcons or Bootstrap Icons until the next release.


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

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.