Grid k-icon not appearing when using local kendo.common.min.css file

[Dean]

I'm building a local WPF application that uses kendo grids. The application needs to work offline so I'm referencing the kendo css and js files in local directory within my application. Everything is working fine except the icons for filtering and paging aren't appearing within the grid. I've attached a small sample project to show my problem.

If you uncomment line 45 in MainWindow.xaml.cs to reference the remote copy of kendo.common.css everything works fine, but when referencing the local copy of that file, the images don't appear properly.

[Alex Hajigeorgieva]

Hello, David,

Thank you very much for the provided runnable project.

The Kendo UI icons are now font icons and the font should be available as a resource so the icons can appear. I can see that the files are in the correct folder but I am unsure if the WPF application needs an additional configuration to serve the font locally or if it is a matter of the way that paths are declared in the kendo css files combined with the WPF environment.

I will need more time to tell you what exactly is the issue but it most likely has to do with the URL src path to the WebFontIcons font in the kendo.common.min.css:

@font-face {
  font-family: 'WebComponentsIcons';
  src: url('fonts/glyphs/WebComponentsIcons.eot?gedxeo');
  src: url('fonts/glyphs/WebComponentsIcons.eot?gedxeo#iefix') format('embedded-opentype'), url('fonts/glyphs/WebComponentsIcons.ttf?gedxeo') format('truetype'), url('fonts/glyphs/WebComponentsIcons.woff?gedxeo') format('woff'), url('fonts/glyphs/WebComponentsIcons.svg?gedxeo#WebComponentsIcons') format('svg');
  font-weight: normal;
  font-style: normal;
}

I suggest replacing the path with the local path in the CSS file and possibly removing the query part of the URL. I will get back to you when I have more information why you may be missing the font icons.

Let me know what you think.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Dean]

Thanks for the reply Alex. I tried updating the CSS file to point to the local path of the glyph files but that didn't fix the issue either.

[Alex Hajigeorgieva]

Hello, David,

I am sorry to hear that the suggestion produced no results.

I am wondering if the reason lies with the WebBrowser component and its limitations to load custom fonts. Kendo UI Supports the browsers listed here:

https://docs.telerik.com/kendo-ui/intro/supporting/browser-support

Are you able to add another custom font to the page from the local files and use that in the application?

Look forward to hearing back from you.

Regards,
Alex Hajigeorgieva
Progress Telerik