Paging Icon

[Junfeng]

Based on the article here, it says we can customize the Pager template:
https://www.telerik.com/kendo-angular-ui/components/grid/paging/#toc-pager-template

Is there a way i can change the ICONs of the <kendo-pager-prev-buttons> or <kendo-pager-next-buttons> ?

[Preslava]

Hello Junfeng,

The default arrow icons of the Grid Pager can be changed by setting ViewEncapsulation to None and then overwriting the styles responsible for the rendered icons. 
I have modified one of our documentation examples in stackblitz, by using our font icons: 
https://stackblitz.com/edit/angular-jffu7o?file=app/app.component.ts
The content property is used for specifying the selected icon. More information on how this works could be found here:
https://www.telerik.com/kendo-angular-ui/components/styling/icons/#toc-using-unicode-characters
Alternatively, the styles can be overwritten globally.
https://stackblitz.com/edit/angular-eyd5qw?file=index.html
I hope this helps. Let me know should there be further questions.

Regards,
Preslava
Progress Telerik

[Junfeng]

Hi Preslava, 

Thank you so much for the example. 

I have another question, is it possible to remove the icon and change it something else like text ? i have a requirement that needs it to be a text and style it.

[Preslava]

Hello Junfeng,

For this scenario,  I would suggest to use a template with the PagerTemplateDirective.  Thus, it would be possible to customize the entire content of the pager, as per requirements. 

https://www.telerik.com/kendo-angular-ui/components/grid/paging/#toc-pager-template

By using a template, the developer is responsible for handling the required logic. 

I have modified the example from the provided link above accordingly:

https://stackblitz.com/edit/angular-bezegw?file=app/app.component.ts

I hope this helps. Let me know should there be further questions.

Regards,
Preslava
Progress Telerik