Adding custom icon to PrimeNG Steps

I had a hard time to find out how to add custom styling to Steps component of awesome PrimeNG component library. The component doesn’t have a natural way to change steps items as Angular Material do. We’ll use FontAwesome for icon display and Sass for styling format.

Let create first the basic Steps configuration

Component

Template

Customization

Now let add the styleClass property on steps configuration.

{ label: ‘Step 1’, styleClass: ‘icon check’ },

If you inspect the browser you will see the classes applied to the corresponding element.

CSS

Now lets move to the css world. This is the core of our customization which use the classes added via styleClass property of PrimeNG’s MenuItem.

We are using flex-box to styling the layout. The first 3 lines are for align the steps along the component width. After, we add the generic configuration for step items like FontAwesome’s font family, position and the font weight which is mandatory. After the generic configuration we define the specific configuration for each desired icon to be shown in step item area.

Done!

Conclusion

PrimeNG Steps provides a non intuitive mechanism to customize step items which can be difficult to implement. I wish this approach can helps to those who want to improve their wizard implementation.