Sizing an icon on a kendoButton

[George]

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

 

 

[Zornitsa]

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:

• https://dojo.telerik.com/@Zornitsa/OziqoYeR/4 

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