The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More
Light
Dark
System
Ask  Question

Metronic 8.3.3 Bootstrap Icons Issue with Laravel

Hello Support,

I am using Metronic 8.3.3 (Bootstrap version) with Laravel, and I am experiencing a major issue with the KeenIcons system.

Problem Description

Many icons are not being displayed. While some icons render correctly, a large number of them do not appear at all. In several cases, an icon is displayed, but it is not the exact icon requested.

Examples include:

ki-duotone ki-black-left-line
ki-duotone ki-black-right
ki-duotone ki-calendar-8
ki-duotone ki-dots-square
and many other KeenIcons.

These either:

Do not render at all.
Render as blank space.
Display a completely different icon than the one specified.

What I Have Already Checked

Installed Metronic 8.3.3 Bootstrap correctly.
Integrated it with Laravel.
Verified that all Metronic CSS, JavaScript, fonts, and assets are loaded.
Confirmed that the icon class names match the official documentation.
Cleared Laravel caches (optimize:clear).
Rebuilt frontend assets (npm run build).
Cleared browser cache and tested in multiple browsers.
Verified that some icons work correctly, while many others do not.

Expected Behavior

Every KeenIcon documented for Metronic 8.3.3 should render correctly when using its documented CSS classes in a Laravel application.

Actual Behavior

Many icons are missing.
Some icon classes display the wrong icon.
The issue affects a significant portion of the KeenIcons library, making it difficult to use the UI as documented.

Environment

Metronic Version: 8.3.3
Demo: Bootstrap
Framework: Laravel
Bootstrap: 5.x
Node.js: Latest LTS
Browser: Tested in multiple browsers
Operating System: macOS

Questions

Could you please help clarify the following?

  1. Is this a known issue in Metronic 8.3.3? 2. Is there an updated KeenIcons package, font, or asset that must be installed separately when using Laravel? 3. Are there any additional Laravel-specific installation steps required for KeenIcons? 4. Are some icon names in the documentation outdated or no longer supported? 5. Is there a patch or newer version that resolves this issue?

Your assistance would be greatly appreciated, as this issue is affecting a large number of icons throughout the application.

Thank you.

K
Kashif Raza 3 weeks ago
HTML
1 Answers
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)

K
KTAI Author 3 weeks ago

Hi Kashif,

Understanding

You're using Metronic 8.3.3 (Bootstrap) with Laravel and many KeenIcons are not displaying — either rendering as blank space, invisible, or showing the wrong icon. You've already verified assets are loaded and class names match the documentation.

Solution

I verified the specific icons you mentioned (ki-black-left-line, ki-black-right, ki-calendar-8, ki-dots-square) against the CSS bundle — they all exist in plugins.bundle.css, so this is not a missing-icons issue. The problem is likely how Laravel loads the assets.

Step 1: Verify the correct CSS/JS files are loaded

In your Blade layout, make sure you're loading these files in this order:

<!-- In <head> -->
<link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />

<!-- Before </body> -->
<script src="{{ asset('assets/plugins/global/plugins.bundle.js') }}"></script>
<script src="{{ asset('assets/js/scripts.bundle.js') }}"></script>

The plugins.bundle.css file contains all KeenIcons font definitions. If it's missing or not loading, icons will not render.

Step 2: Check your asset file paths

The icons require the font files (.woff2, .woff, .ttf) to be present at the correct path. After installing Metronic, copy the assets into your Laravel public/ directory:

cp -r /path/to/metronic-bootstrap/dist/assets public/

This should create public/assets/plugins/global/plugins.bundle.css and the font files under public/assets/plugins/global/fonts/.

Step 3: Verify fonts are loading in browser

Open your browser's Developer Tools (F12) → Network tab → filter by "Font" or "CSS". Check that:

  • plugins.bundle.css loads with status 200
  • The .woff2 and .woff font files under plugins/global/fonts/ load successfully
  • No 404 errors for font files

Step 4: Check Blade template for HTML entity encoding

If you're using Blade syntax, make sure icon HTML is output raw:

{!! '<i class="ki-duotone ki-calendar-8"><span class="path1"></span><span class="path2"></span></i>' !!}

If you use {{ }} (escaped output), HTML entities like &lt; and &gt; will be rendered instead of actual <i> tags, making icons invisible.

Step 5: Check CSS class spacing

KeenIcons requires a space between the style class and icon name:

<!-- CORRECT -->
<i class="ki-duotone ki-calendar-8 fs-2x">
    <span class="path1"></span>
    <span class="path2"></span>
</i>

<!-- WRONG (missing space) -->
<i class="ki-duotoneki-calendar-8 fs-2x">

Known Issues

There are two known KeenIcons bugs in v8.3.3 that may affect you:

  1. Naming mismatch (3 icons): ki-plus-square, ki-minus-square, and ki-check-square use the wrong class names in HTML vs CSS. The CSS defines them with a "d" suffix (ki-plus-squared). Workaround: use ki-plus-squared instead.

  2. Missing icons (31 icons): Some icons documented on the KeenIcons page are not included in plugins.bundle.css. This is a build pipeline issue. If you find more icons not rendering, check the CSS bundle directly to verify they exist.

Sources

Next Steps

If the above steps don't resolve the issue, please share:

  1. A screenshot of your browser's Network tab showing the CSS/JS/font loading status
  2. The exact HTML output of one broken icon (right-click → Inspect Element)
  3. Whether you're using Vite or the default build system

This will help pinpoint whether the issue is asset loading, CSS compilation, or something else.

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  :(