1. Home
  2. Forum
  3. React - EJ 2
  4. Custom icon on step

Custom icon on step

Hi Syncfusion,


I am trying to display a custom icon on a step but it does not seem to work.

Am I missing something?

components:

<StepperComponent
  readOnly={true}
  activeStep={rfcFormResult.data.currentSection}
>
  <StepsDirective>
    <StepDirective
      iconCss={"lucide-list-icon"}
      label={"Selection"}
    />
    <StepDirective
      iconCss="lucide-list-icon"
      label={"References"}
    />
    <StepDirective iconCss="lucide-list-icon" label={"Data"} />
    <StepDirective
      iconCss="lucide-list-icon"
      label={"Attachments"}
    />
    <StepDirective iconCss="lucide-list-icon" label={"Review"} />
  </StepsDirective>
</StepperComponent>


css:
.lucide-list-icon {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxpc3QiPjxsaW5lIHgxPSI4IiB4Mj0iMjEiIHkxPSI2IiB5Mj0iNiIvPjxsaW5lIHgxPSI4IiB4Mj0iMjEiIHkxPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjgiIHgyPSIyMSIgeTE9IjE4IiB5Mj0iMTgiLz48bGluZSB4MT0iMyIgeDI9IjMuMDEiIHkxPSI2IiB5Mj0iNiIvPjxsaW5lIHgxPSIzIiB4Mj0iMy4wMSIgeTE9IjEyIiB5Mj0iMTIiLz48bGluZSB4MT0iMyIgeDI9IjMuMDEiIHkxPSIxOCIgeTI9IjE4Ii8+PC9zdmc+");
}

Chee

3 Replies
SI Silambarasan I Syncfusion Team May 28, 2024 07:23 AM UTC

Hi Alexandre,


Your requirement for "Setting a custom icon as a background image" for Stepper steps can be achieved by customizing the CSS styling using the :before selector. Please check the sample below, and let us know if you need any further assistance.


StackBlitz sample: Link


 

.lucide-list-icon:before {

  background-image: url('data:image/svg+xml;base64,PHN2ZyB...');

  background-repeat: no-repeat;

  background-size: 25px 20px;

  content: ' ';

  width: 25px;

  height: 20px;

}

 

 


Regards,

Silambarasan Ilango


AP Alexandre Pereira May 29, 2024 04:18 AM UTC

Hi thanks for the quick answer, how can I make sure that the selected item is displayed with the proper color and size? Is there a pre-build css class that I can use in the step directive?


SI Silambarasan I Syncfusion Team May 29, 2024 10:22 AM UTC

Hi Alexandre,


Thank you for your update.


As per your requirement, you have used a custom icon as a background image. The built-in styles are applied properly; however, in your case, the background image (SVG base64) is generated with a transparent background and a black icon color. Therefore, handling the color and size of the step icon can be achieved through sample-level CSS customization.


In the example below, we have modified the active step icon color to white by customizing the background using the filter CSS property.


StackBlitz sample: Link


//. . .

 

.e-step-inprogress .lucide-list-icon:before {

  filter: invert(1);

}

 

 



Could you please share more details about your exact requirement? This will help us check and provide a solution based on your specific needs.


Regards,

Silambarasan Ilango



Loader.
Up arrow icon