search

michaelbromley / ngx-pagination

Pagination for Angular
http://michaelbromley.github.io/ngx-pagination/
MIT License
1.21k stars 244 forks source link

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

Open BHUWANESHWAR2210 opened 3 weeks ago

BHUWANESHWAR2210 commented 3 weeks ago

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 commented 3 weeks ago

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