To replace the Prev and Next with < and > in ngx-pagination - npm #411
Description
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;
}