How to load icons to the SfSwitch for On and Off labels in Blazor Toggle switch?

3 mins read

In Blazor Toggle Switch applications, the SfSwitch component from Syncfusion allows you to create a toggle switch control. By default, the switch displays text for its On and Off states. However, you can customize the switch to display icons instead of text by using CSS classes.

Here’s how you can load icons to the SfSwitch for On and Off labels:

Step 1: Add the SfSwitch Component

First, add the SfSwitch component to your Blazor page or component with the @bind-Checked attribute to bind its value to a boolean property. Assign custom CSS classes to the cssClass attribute for styling the On and Off labels.

<SfSwitch @bind-Checked="isChecked" cssClass="e-custom" OnLabel="" OffLabel=""></SfSwitch>

@code {
    private bool isChecked = true;
}

Step 2: Define Custom CSS

Next, define the custom CSS classes to style the On and Off labels with your desired icons. You can use base64 encoded images or URLs to external images for the background-image property.

<style>
    .e-custom.e-switch-wrapper .e-switch-on {
      height: 18px;
      width: 18px;
      background-size: cover;
      background-image: url('your-on-icon-image');
      margin-left: 3px;
      font-size: 0px;
    }
    .e-custom.e-switch-wrapper .e-switch-off {
      height: 18px;
      width: 18px;
      background-size: cover;
      background-image: url('your-off-icon-image');
      margin-left: 25px;
      font-size: 0px;
    }
</style>

Replace 'your-on-icon-image' and 'your-off-icon-image' with the actual base64 encoded images or image URLs for the On and Off states, respectively.

Step 3: Run the Application

After setting up the SfSwitch component and defining the custom CSS, run your Blazor application. The switch should now display the icons for the On and Off states instead of text.

Demo

You can also check out a live example of the customized SfSwitch with icons on the Syncfusion Blazor Playground.

Additional References

For more information on the SfSwitch component and its customization options, you can refer to the following resources:

Conclusion

I hope you enjoyed learning how to load icons to the SfSwitch for On and Off labels in Blazor Toggle switch.

You can refer to our Blazor Toggle Switch feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Toggle Switch example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)