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>

Answer 1

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.