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

Introducing React JSX via a nifty bookmarklet

Looking to convert code found in an HTML file into a bookmarklet? Here's the code snippets involved: <script src="JSXTransformer-0.13.3.js"></script> <script src="react-0.13.3.js"></script> <script type="text/jsx;harmony=tr ...

javascriptreactjsbookmarkletjsx

Concealing overflow for text content through CSS styling

I am currently working with an element that contains both an image and text. View the Fiddle here Note: To see the full grid, resize the preview accordingly. The CSS I have written is as follows: .gridster .gs-w .item{ position: relative; wi ...

javascriptjquerycssgridster

How can you switch focus in a React class component by pressing the Enter key?

I'm new to coding in React and I have created a Login Page like this: class Login extends React.Component { constructor(props) { super(props); this.state = { username: null, password: null, } ...

reactjsmaterial-ui

The sidebar I designed didn't completely extend across the column in Bootstrap

My sidebar in Bootstrap didn't fill the entire column because I forgot to set a specific width for it. Here is the CSS code for my sidebar: .sidebar { position: fixed; /* top: 0; bottom: 0; left: ...

htmlcssbootstrap-4ejs

Display a component upon successfully passing an ID via a hyperlink

I have a link that allows me to access multiple URLs by passing an ID. My goal is to load query.js whenever the alert is clicked, and I want the passed ID to be available as props. How can I accomplish this in Next.js? {Items.map((itm) => ( <Li ...

reactjsnext.js

Utilize CSS to create a column layout

I have some HTML output that I would like to style using CSS, but unfortunately I have no control over how the HTML is generated and cannot make any changes to it. Right now, I have a two-column layout set up here: http://jsfiddle.net/uvg6f3tr/ I'm ...

htmlcssmultiple-columns

Tips for successfully maintaining a MERN application in a live environment

After developing my own full-stack app using the MERN stack along with socket.io and meilisearch, it has been successfully running for a few months. Recently, however, it started crashing unexpectedly with no clear pattern. In an attempt to address these c ...

node.jsreactjsexpressmernpm2

Can a callout or indicator be created when a table breaks across columns or pages?

As we develop HTML pages for printing purposes, one specific requirement for tables is to include an indicator like "Continues..." below the table whenever a page or column break occurs. Additionally, in the header of the continuation of the table, we need ...

javascripthtmlcsscss-selectors

Do we need to include href in the anchor tag?

Why am I unable to display the icon within the <anchor> element without using the href attribute? The icon only appears when I set the href attribute to "". Even if I manage to show the icon by adding href="", adjusting the size with width and height ...

javascriptjqueryhtmlcss

The appearance of the upload button in React using Material-UI seems off

After following the MUI document on React Button upload, I noticed that the UI results were different than expected. Instead of just showing the button UI, there was an additional UI element present. By adding the sx={{display:'none'}} property, ...

javascriptreactjsmaterial-ui

Altering the hue of a picture

Looking to alter the color of an image on a webpage, specifically a carport. It's crucial that the texture and shadows remain consistent. Swapping out images with different colors would require an excessive amount of images, so I'm seeking advice ...

javascriptjquerycssflashcolors

What is the best way to update text in an element when hovering or activating it?

I am currently designing a website with a prominently placed "Hire me" button in the center of the page. The button was implemented using the following code: <div id="hire_me_button"> <a href="contact.html"><h4 id="hire_me" class="butto ...

javascriptjqueryhtmlcss

Is it possible to use one table as a background and place another table on top of it?

Currently, I am designing an email template and due to restrictions, I can only use tables. I am looking for a solution to meet my requirements using tables. Since all the content is dynamically generated via an RSS feed, images cannot be used in this ca ...

csshtmlhtml-email

Insert a gap between the two columns to create some breathing room

Does anyone know how to create spacing between columns in an HTML table without affecting the rows? In my table, each column has a border around it: <table> <tr> <td style="padding:0 15px 0 15px;">hello</td> <td style=" ...

htmlcsshtml-table

Clicking on the image does not result in a larger image being displayed

Currently working on an assignment that requires a modal pop-out to display larger versions of photos when clicked, with the option to go back using the X button. Unfortunately, I'm facing issues with the X button not functioning properly and images n ...

javascriptjqueryhtmlcssmodal-dialog

What is the difference between using 'classes' and 'className' in Material UI?

I find myself a bit perplexed about these two properties. Let's say I have, const useStyles = makeStyles(() => ({ style: { width: 600, height: 400, }, })); With this, I can use, const classes = useStyles(); <SomeComponent classNa ...

javascriptreactjsmaterial-ui

Tips for incorporating the multiply times async function into mocha tests

I am attempting to utilize the async function foo multiple times in my mocha tests. Here is how I have structured it: describe('This test', () => { const foo = async () => { const wrapper = mount(Component); const button ...

javascriptreactjstestingasync-awaitmocha.js

What is the best way to apply CSS to a mat-row element only when it is being hovered over?

I have a table with rows where a specific condition triggers a light red background color for each row. On hover, the background changes to light gray for all rows. However, I need the special rows (already colored light red) to have a deeper shade of red ...

htmlcssangular

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

htmlcss

Make sure to keep the <div> element nested within the image

I'm working on creating a photo album that displays images in full screen and allows users to navigate using arrows. Check out my progress here: https://jsfiddle.net/q49wzey6/ Here's the HTML code I'm using: <div class="main"> &l ...

htmlcssposition