Custom Icon in Nova theme is black

6 posts, 2 answers
  1. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 21 Aug Link to this post

    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

     

  2. Answer
    Patrick
    Admin
    Patrick avatar
    171 posts

    Posted 22 Aug Link to this post

    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{
      }
    </style>

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

    Hope this helps!

    Regards,
    Patrick
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 23 Aug in reply to Patrick Link to this post

    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

     

  5. Answer
    Patrick
    Admin
    Patrick avatar
    171 posts

    Posted 24 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. Peter
    Peter avatar
    35 posts
    Member since:
    May 2016

    Posted 25 Aug in reply to Patrick Link to this post

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

    Peter

  7. Patrick
    Admin
    Patrick avatar
    171 posts

    Posted 25 Aug Link to this post

    Hello Peter,

    Glad everything is working well!  

    Regards,
    Patrick
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready