1. Home
  2. Forum
  3. Angular - EJ 2
  4. Icon conflict between Sidebar custom icons and DatePicker icon after importing bootstrap5.css

Icon conflict between Sidebar custom icons and DatePicker icon after importing bootstrap5.css

Hello,

I'm using the Sidebar component from Syncfusion in my Angular application, and I wanted to customize the sidebar menu icons using the Syncfusion icon set. For that purpose, I imported the following style in my global styles:

@import "../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css";

However, after adding this import, I noticed that the default icon for the ejs-datepicker component has changed unexpectedly. It seems like the icon styles are being overridden by the bootstrap5.css file.

Is there a recommended way to use custom icons for the sidebar without affecting the default styling of other Syncfusion components like the DatePicker? Ideally, I would like to isolate the icon styles only to the sidebar menu if possible.

Thank you,



3 Replies
PK Priyanka Karthikeyan Syncfusion Team June 17, 2025 03:25 PM UTC

Hi Ciprian-Catalin,


Thank you for reaching out to us. 

 

It appears that multiple themes are being referred to within your application, which may be causing the unexpected behavior. If you intend to use styles from the node_modules, we kindly recommend not mixing them with CDN links pointing to a different theme, as this can lead to conflicts and inconsistencies.

 

To assist you further, we have prepared a sample demonstrating how to apply the Bootstrap5 theme exclusively through node_modules. Please find the relevant SCSS imports and the sample link below for your reference:

 

​@import "node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css";
@import "node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
@import "node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
@import 'node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';
@import 'node_modules/@syncfusion/ej2-calendars/styles/bootstrap5.css';
@import 'node_modules/@syncfusion/ej2-angular-calendars/styles/bootstrap5.css';
 

 

Sample: https://stackblitz.com/edit/angular-rdhvbsfg-dfrz4anx?


Regards,

Priyanka K


CI Ciprian-Catalin replied to Priyanka Karthikeyan July 1, 2025 07:58 AM UTC

Hello Priyanka,

Thank you for your reply.

I would like to clarify my exact requirement and the issue I’m facing:

My goal is to keep the Material theme globally in my application (for all components like DatePicker, Grid, Buttons) and use only the Bootstrap5 icons from the Syncfusion icon set in the Sidebar menu, because the visual style fits better there.

The issue is that when I import:

@import "../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css";

it changes all icons globally across the application, including the DatePicker dropdown icon, which switches to the Bootstrap5 style instead of Material.

Here is what I tried so far:

  1. Importing bootstrap5.css only in the Sidebar component SCSS with ViewEncapsulation.Default or None.
    Result: Even with component-scoped styles, icons are still overridden globally.

  2. Using only the font files (woff, woff2, ttf) from Bootstrap5 with a custom @font-face and defining custom CSS for Sidebar icons.
    Result: Many icons do not display correctly because the glyph codes require the full Bootstrap5 CSS mapping.

  3. Mixing Material global theme with Bootstrap5 CSS only for Sidebar.
    Result: Causes style conflicts or global icon overrides.

My question is: Is there a recommended way to use Bootstrap5 icons only in the Sidebar menu, while keeping Material icons for all other components (DatePicker, Buttons, Grid, etc), without overriding the global theme or creating icon mismatches?

If Syncfusion currently does not support scoped icon theming, are there any workarounds you recommend, such as loading Bootstrap5 icons as a separate font family only for Sidebar?



PK Priyanka Karthikeyan Syncfusion Team July 4, 2025 01:45 PM UTC

Hi Ciprian-Catalin,


We’d like to kindly clarify that, at this time, applying different themes (such as Bootstrap 5 icons for the Sidebar and Material for other components) on the same page is not supported. As our theme files include both icons and styles, combining themes in this way may cause conflicts, potentially leading to inconsistent styling or icon mismatches.


To best meet your needs, we recommend using a single theme—either Bootstrap 5 or Material—throughout the application. This approach ensures a consistent look and feel while preventing any potential conflicts.


Please feel free to contact us if you have further questions.


Regards,

Priyanka K


Loader.
Up arrow icon