To replace the Prev and Next with < and > in ngx-pagination - npm

[BHUWANESHWAR2210]

Here I'm customizing the pagination controls by overriding the CSS to use Material Icons. Here's how you can modify the icons and ensure that the display properties are correctly set. Explanation Clear Old Content: The rules explicitly clear any content in the ::before and ::after pseudo-elements for both the .pagination-next and .pagination-previous buttons.

Ensure All States Are Covered: The CSS targets both active and disabled states and includes extra rules to catch any other scenarios that might reintroduce the double arrows.

Override Everything: The CSS now has high specificity and uses !important to ensure that it overrides any conflicting styles from other sources.

Implementation Replace the Existing CSS: Update your styles with this comprehensive CSS. Clear Browser Cache: Clear the cache and reload the page to ensure the new styles take effect.

Try this:

.ngx-pagination .pagination-previous a::before, .ngx-pagination .pagination-previous.disabled::before, .ngx-pagination .pagination-previous.disabled a::before { font-family: 'Material Icons' !important; content: '\2039' !important; vertical-align: middle !important; display: inline !important; } .ngx-pagination .pagination-previous a::after, .ngx-pagination .pagination-previous.disabled a::after { content: '' !important; }

.ngx-pagination .pagination-next a::before, .ngx-pagination .pagination-next.disabled::before, .ngx-pagination .pagination-next.disabled a::before { font-family: 'Material Icons' !important; content: '\203A' !important; vertical-align: middle !important; display: inline !important; } .ngx-pagination .pagination-next a::after, .ngx-pagination .pagination-next.disabled a::after { content: '' !important; }

.ngx-pagination .pagination-next.disabled::after, .ngx-pagination .pagination-previous.disabled::after { content: '' !important; }

.ngx-pagination .pagination-next a, .ngx-pagination .pagination-previous a { font-family: 'Material Icons' !important; content: '' !important; }

[michaelbromley]

Hi, is this an issue or are you just sharing your solution here to help others?

[ali-ic]

@michaelbromley is it possible to use the default template/config (with max size, ellipses, screen reader labels, etc) and change the Prev/Next icons? I can't do the css method suggested because I am using fa's icon library method to only include used icons. This is how my icon is used: <fa-icon [icon]="['fas', 'angles-left']" size="lg" />