Change Field Radio Icons

Forms
1

Hi,

Is it possible to change the field radio icons? I don't like the default ones.

Is there a library or some sort/can I create something custom?

image
image

Thanks!

2

Hello @DryChips,

You can use the default Kendo icons or load any set of icons to the form.

You can find the example of how to load Google icons here:

To replace icons, use CSS. For instance, to replace the default calendar icon with another one:

span.k-icon.k-i-calendar::before {
   content: '\e63f'; 
}

Also, you can change the styling of the icon the same way you do for the text. For instance, make calendar icon blue:

span.k-icon.k-i-calendar {
    color: blue;
}
1 Like
3

Awesome! That's fine.

So, to import the google font/icon library,

I would place this code inside the JS Editor in Plumsail:

var imported = document.createElement('link');
imported.href = "https://fonts.googleapis.com/icon?family=Material+Icons" //for example
imported.rel = "stylesheet"
document.head.appendChild(imported);

Then find the icon I like and place the Unicode into the CSS code you kindly provided?

4

@DryChips,

You can load stylesheet using HTML control:

image
image1015×532 33.5 KB

Yes, that is correct!

1 Like
5

Awesome! I actually wanted to avoid importing it via HTML. I prefer placing the code inside the JS Editor, instead of having it on the designer.