Sizing an icon on a kendoButton

1 Answer 54 Views
Button Styling
George
Top achievements
Rank 2
Iron
Iron
Iron
George asked on 27 Oct 2023, 08:52 PM | edited on 27 Oct 2023, 08:53 PM

Now that we are supposed to switch to svg icons, away from the font icons, I was wondering if there is an easy way to size the buttons? I use a custom class for the buttons right now and on two of the buttons I am using icons:

They seem to have shrunk. I am guessing this is because of the switch from font icons to the svg icons?

To be honest the icon on the refresh button for v 2020.1.118 disappeared and I had to find a suitable replacement.

 

So some of the sizing issue for that button might be caused by what icon I picked -- icon: "refresh" didn't seem to produce an icon, so I went with icon "arrowRotateCwIcon".

I just need some sugestions on how to maintain my custom style and get the icons to appear bigger. The style I am using is below:

 


.submit {
    width: 110px;
    height: 30px;
    padding: 20px 16px 20px 16px;
    border-radius: 4px;
    background-color: #1e98d7;
    box-sizing: border-box;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.35);
    font-family: "Roboto Medium", "Roboto", sans-serif;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: normal;
    letter-spacing: 0.4px;
}

    .submit:hover {
        background-color: #0084cf;
        box-sizing: border-box;
    }

    .submit:active {
        background-color: #50a5d5;
        box-sizing: border-box;
    }

Regards,

George

 

 

1 Answer, 1 is accepted

Sort by
0
Zornitsa
Telerik team
answered on 01 Nov 2023, 11:52 AM

Hello George,

Thank you for the provided screenshots and code snippet.

In the Dojo example linked below, you can observe the same Button configuration and styling as the ones in the resources you had shared:

However, as you can see in the example, the arrowRotate icon is not shrunk and seems to appear as expected.

Therefore, could you please try to modify and reproduce the experienced issue in the shared Dojo, so I would be able to inspect the possible cause of the described behavior? You could also check if there are some other custom styles that you are using for the buttons and icons, which affect the appearance of the elements. 

I am looking forward to your reply.

Regards,
Zornitsa
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Button Styling
Asked by
George
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Zornitsa
Telerik team
Share this question
or