Icon fonts not showing in PDF Export

[Mike]

I'm using Icon fonts in one of my components.  They show up fine on the visible page but not on the PDF Export of that page.  Do I need to load a specific font to get the icons to appear in the PDF output?

[Dimiter Topalov]

Hi Mike,

Indeed, all fonts that contain characters that need to get exported need to be explicitly registered and embedded as described in the following sections of our documentation:

https://www.telerik.com/kendo-angular-ui/components/pdfexport/embedded-fonts/

https://www.telerik.com/kendo-angular-ui/components/drawing/pdf-output/embedded-fonts/

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Mike]

Hi Dimiter,

Thanks.  I can see how to accomplish font loading from the doc,  but it's not clear to me which specific font I need to load to access the icons..

Mike

 

 

 

[Dimiter Topalov]

Hi Mike,

If the icons in questions are Kendo UI for Angular ones, they are integrated in our themes and should be exported properly without further efforts on your end (the exact font family is "WebComponentsIcons"). A possible reason for the icons not being exported properly is if the theme is loaded from a different domain and there are no proper CORS exceptions set on the server:

https://github.com/telerik/kendo-angular/issues/1317#issuecomment-385956724

Here is a demo with a PDF Export exporting our icons as expected:

https://stackblitz.com/edit/angular-xpa3lf?file=index.html (note the crossorigin attribute on the link tag referencing the theme)

If the icons are a part of a third-party font, then the respective font's TTF files need to be embedded as described in the documentation.

To sum up, the PDF Export needs an embedded font that supports all symbols/characters/icons that need to be exported. The Kendo themes contain everything necessary related to the built-in Kendo icons, so loading the theme should be enough (with the additional considerations for potential CORS-related issues, addressed above). If, on the other hand, third-party fonts and icons are used, the respective fonts need to be embedded.

I hope this clears up any potential misunderstanding, but if I am missing something, or you have further questions, please let me know.

Regards,
Dimiter Topalov
Progress Telerik