Blueprintjs icons not displaying correctly on pages

Question

I am currently working on an old React application that has blueprintjs version 1. I upgraded to version 4. I followed the documentation. The icons are currently not displaying correctly. See image.

Am I doing anything wrong?

  <div className="hg-RightMenu hg-toolbar">
    <ul className="hg-RightMenu__list">
      <li className="hg-RightMenu__list__item">
        <SidebarToggle icon="bp4-icon-user" tooltip="User Profile" name="PROFILE" />
        <div className="hg-badge">{messagesCount}</div>
      </li>
      <li className="hg-RightMenu__list__item">
        <SidebarToggle icon="bp4-icon-history" tooltip="Recent Searches" name="SEARCH_HISTORY" />
      </li>
      <li className="hg-RightMenu__list__item">
        <SidebarToggle icon="bp4-icon-floppy-disk" tooltip="Saved Searches" name="SAVED_SEARCHES" />
      </li>
   </ul>
 </div>

it will be easy to know what is the problem if you provided some code ! — monim, Jul 12 '22 at 19:13
import 'normalize.css/normalize.css'; import '@blueprintjs/icons/lib/css/blueprint-icons.css'; import '@blueprintjs/core/lib/css/blueprint.css'; — Damien, Jul 15 '22 at 16:23

score 0 · Answer 1 · answered Aug 29 '22 at 13:45

What is the implementation of <SidebarToggle> in your code example? That's not a Blueprint component, so I'm guessing you're taking the icon="bp4-icon-user" prop there and forwarding it to a Blueprint API. You likely just have to drop the "bp4-icon-" prefix. There were a number of changes to icons APIs in Blueprint v2.0, see the changelog here.

Blueprintjs icons not displaying correctly on pages

1 Answers1