Having trouble with blueprintjs icons not appearing as they should on certain pages

I have recently updated an older React application from blueprintjs version 1 to version 4 by following the documentation. However, I am now facing an issue where the icons are not displaying correctly as shown in the image below.

Could someone please point out what might be going 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>

https://i.stack.imgur.com/bU1To.png

cssreactjsiconsblueprintjs

Answer №1

Can you provide an example of how <SidebarToggle> is implemented in your code? It seems like it's not a Blueprint component, so my guess is that you're passing the icon="bp4-icon-user" prop and forwarding it to a Blueprint API. You may just need to remove the "bp4-icon-" prefix. There have been some changes to icon APIs in Blueprint v2.0, which you can check out in the changelog here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disable automatic playback of HTML video

There is an HTML video with an image that loads initially and then disappears to play the video. I would like the image to always be visible until I click on it. Once clicked, the video should start playing. You can view the code on JSFiddle: http://jsf ...

javascriptjqueryhtmlcss

The behavior of table elements is distinct when using align="center" compared to utilizing CSS text-align: center

In my table setup, I have a parent table with a width of 100% and a child table with a width of 300px. I attempted to center the child table using CSS by setting text-align: center; (https://jsfiddle.net/wrzo7LLb/1/) <table class="body"> <tr> ...

htmlcss

Babel refuses to compile a file if it detects the presence of a nested package.json file within it

Currently, I am utilizing WebPack, Babel, and React within my project. The folder structure that I have in place is outlined below: node_modules/ .babelrc package.json SomeThirdPartyFolder/ node_modules/ package.json src/ FileA.js ...

node.jsreactjswebpackbabeljs

What is the best way to implement an onClick event listener in a TypeScript React application?

Is there a way to properly add an onClick event listener to a div element in my code snippet below? useEffect(() => { if (ref.current === null) { return; } const handleClick = (el: HTMLDivElement, e: MouseEvent) = ...

reactjstypescriptdom

Jest is not producing any output at all when executing tests

Below is a snapshot of my package.json: "jest": { "cacheDirectory": "/tmp/jestCache", "scriptPreprocessor": "node_modules/babel-jest", "modulePaths": [ "<rootDir>/app/static/react/" ], "moduleDirectories": [ "node_modules" ...

reactjsnpmjestjsbabel-jest

Is it possible to transfer a property between components without relying on the props object?

I created a component that showcases a variety of cafes. Inside this component ( CafeList.jsx), an axios request is triggered to fetch a list of cafes, which is then mapped over and displayed on the browser. I envision users being able to click on a spe ...

reactjsexpressmongoose

Warning message about dependency in ReactJS useEffect causing an infinite loop

I am facing an issue in my functional component where I have state that changes, and I want to perform some actions whenever it updates. To achieve this, I tried using the useEffect hook, but I encountered a "dependency missing" error. Even after adding al ...

reactjsreact-hooksinfinite-loopreact-statereact-functional-component

Webpack dynamically imports files from a folder

In order to streamline my development process, I have a specific structure for organizing React components. Each main component has its own components folder right alongside it. Currently, I find myself manually importing each component from the components ...

javascriptreactjswebpackimportrequire

Tips for creating unique Styles for H1, H2, and H3 with MaterialCSS by utilizing createTheme

In my application built with NextJS and styled with MaterialCSS, I have created two themes: a dark theme and a light theme using the following code: import { createTheme } from '@mui/material/styles'; export const darkTheme = createTheme({ pal ...

cssreactjsmaterial-uimaterial-designnext.js13

The error "Rollup EMFILE: exceeding file limit with material-ui icons" is appearing due to an

I have implemented a design system based on Material-ui version 5, with rollup as my bundler. Within one of the custom components, I am importing an icon from Mui5 import { Search } from "@material-ui/icons" During the rollup build process, I e ...

reactjsmaterial-uirolluprollupjs

Using React with Typescript and ie18next to fetch translations from an external API

In the past, I have experience working with i18next to load translations from static json files. However, for my current project, I need to load all translations from an API. How can I achieve this? Additionally, how can I implement changing the translat ...

reactjstypescripti18next

Center a grid of cards on the page while keeping them aligned to the left

I have a grid of cards that I need to align in the center of the page and left within the grid, adjusting responsively to different screen sizes. For example, if there are 10 cards and only 4 can fit on a row due to screen size constraints, the first two ...

javascriptcssreactjstypescriptmaterial-ui

Solving the issue of unnecessary white space when printing from Chrome

Whenever I print from Chrome, there seems to be extra space between lines in the middle of a paragraph! Here is an image showing the difference between print emulation and print preview This excess space is always in the same position on various pages an ...

htmlcssgoogle-chromeprinting

Navigate to a new page on button click using Row with Tanstack / React-Table and Typescript (2339)

Encountering a linting error when attempting to navigate to a new route by clicking on a table row. The functionality is working but how can I resolve this issue? It's showing an error message stating "The property "id" for type TData does not exist." ...

javascriptreactjstypescriptnext.jstanstack

What is the best way to showcase the final div at the top with CSS?

I'm working with 4 separate divs, with the last one acting as a footer. Is there a way to position this last div at the top using CSS? ...

csslayouthtml

I am looking for a solution on how to validate a token issued by Auth0 in a nodejs backend using jwt, but I keep

My React frontend uses Auth0 for user authentication. Once a user is logged in, I retrieve the token using getAccessTokenSilently() and send it to the backend like this: const { user, isAuthenticated, getAccessTokenSilently } = useAuth0() useEffect(() =&g ...

node.jsreactjsexpressjwtauth0

Certain rows appear to be missing even though they are present in both the webpage and its corresponding source code

I am facing a CSS issue that I am unable to resolve. I have 20 results that should be displayed on my website, but only 14 of them are appearing. The other ones are visible in the source code when inspected. When I move the position of the menu up or down, ...

phpjqueryhtmlcss

Creation of Card Component with React Material-UI

I am facing difficulties in setting up the design for the card below. The media content is not loading and I cannot see any image on the card. Unfortunately, I am unable to share the original image due to company policies, so I have used a dummy image for ...

reactjstypescriptdesign-patternsmaterial-uicard

Installing dependencies for Material-UI using npm

I just started my React and NPM journey. After setting up a new directory, running npm init, and then npm install to install React, here is how my configuration in package.json looks like: { "name": "reactapp", "version": "1.0.0", "description": "", ...

reactjsnpmmaterial-ui

Remove underlining from a Custom Link when hovering over it

Is there a way to remove the blue underline from my custom donate button? I created it by going to Appearance -> Menus -> Custom Link. The issue is that this custom link (donate button) is inheriting the same CSS as the navigation menu items, which I want ...

csswordpress