Custom Icon in Nova theme is black

[Peter]

Hi,

I make a simple dialog with the k-i-tick  Icon as OK replacement:

Dojo: Simple Dialog

All work fine, only the tick icon is black. But in Nova theme the icons are white.

It is possible to show the tick icon also in white?

Peter

 

[Patrick | Technical Support Engineer, Senior]

Hello Peter,

The tick icon in the Nova theme is actually black.  But you can use another icon of your choice by using CSS and changing the background image.

Here's how I changed the tick icon to Material Black(which is white):

<style>
  .k-i-tick{
    background-image: url(http://kendo.cdn.telerik.com/2016.2.714/styles/MaterialBlack/sprite.png)
  }
</style>

You can see an example in the Kendo UI Dojo by Progress.

Hope this helps!

Regards,
Patrick
Telerik by Progress

 

 

[Peter]

Hi Patrick,

in Dojo it works fine. But not in in my _Layout.cshtml or view.cshtml.

I found also MaterialBlack/sprite.png in the project folder, so I tested also

<style>
 .k-i-tick{
        background-image: url(~/Content/kendo/2016.2.607/MaterialBlack/sprite.png);
}
</style>

But it has also no effect.

Peter

 

[Patrick | Technical Support Engineer, Senior]

Hi Peter,

Use this instead in your Kendo UI MVC application:

<style>
    .k-i-tick {
        background-image: url(Content/kendo/2016.2.607/MaterialBlack/sprite.png);
    }
</style>

Hope this helps!

Regards,
Patrick
Telerik by Progress

 

 

[Peter]

thank you. Perfect, after I placed it behind the link & src statements.

Peter

[Patrick | Technical Support Engineer, Senior]

Hello Peter,

Glad everything is working well!  

Regards,
Patrick
Telerik by Progress