Changing the dropdown icon for SFDropdownList / DaterangePicker?

[John T]

Hello,

I wanted to ask if it may be possible to change out the icons for the arrow indicator on the dropdown and daterange controls:

Instead of the calendar icon / the filled in triangle, is it possible to place in a different icon? If not, is it possible to change the calendar icon 

[Deepak Ramakrishnan]

Hi John, 

 

Greetings from Syncfusion support. 

 

Yes we can change the icon content by overriding the existing styles . Kindly refer the below code snippet and sample link for your reference. 

 

<style> 

<style> 

    /*Styles to change the daterange picker icon*/ 

    .e-input-group-icon.e-range-icon::before, *.e-control-wrapper .e-input-group-icon.e-range-icon::before { 

        content: '\e71e'; 

        font-family: 'e-icons'; 

        font-size: 17px; 

    } 

 

    /*Styles to change dropdown iconn */ 

    .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before { 

        content: '\e724'; 

        font-family: 'e-icons'; 

        font-size: 16px; 

    } 

</style> 

 

 

[snapshot] 

 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1245355109.zip  

 

Icons UG documentation :  

https://blazor.syncfusion.com/documentation/appearance/icons#bootstrap-4  

 

 

Thanks, 

Deepak R. 

[John T]

This worked on my end, thank you!

[Deepak Ramakrishnan]

You are welcome John.