Change button size with icon

[Michel Jost]

Hi,

I tried to change the size of a button with a icon displayed inside (no text). This is my css:

    .e-button-batch-select, .e-button-batch-select:focus, .e-button-batch-select:active {
        border-radius: 0;
        height: 24px;
        width: 24px;
        background-color: #007BFF;
    }
    
    .e-button-batch-select:hover {
        background-color: #0067D9;
    }
        
    .e-button-batch-select-icon::before {
        content: '\e759';
        color: #FFFFFF;
    }

But when I change height/width from 32 to a smaller size - 24 for example, the icon isn't cented anymore inside the button.

How can I change the button size while the icon is still cented inside the button?

Thanks in advance

Michel

[Aravinthan Seetharaman]

Hi Michel Jost, 

We have checked your reported query, we can achieve your requirement by using CssClass and IconCss attributes with custom CSS class as mentioned below. 

 

@using Syncfusion.Blazor.Buttons 

 

<SfButton CssClass="btn" IconCss="e-icons e-copy"></SfButton> 

 

<style> 

    .btn { 

        border-radius: 0; 

        height: 24px; 

        width: 24px; 

        background-color: #007BFF; 

    } 

    .e-copy::before { 

        content: '\e77b'; 

    } 

    .e-btn.e-icon-btn{ 

        padding: initial; 

    } 

</style> 

 

 

Regards, 

Aravinthan S. 

[Michel Jost]

Thank you. Its working now.

[Aravinthan Seetharaman]

Hi Michel Jost, 

  

Thanks for the update.  

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

  

Regards, 

Aravinthan S