Change Semantic UI's Pagination icon

Question

I'm using Pagination from Semantic UI and I was wondering if it is possible to change the icons of the next/previous buttons.

The component:

import React from 'react'
import { Pagination } from 'semantic-ui-react'

const PaginationExampleCompact = () => (
  <Pagination
    boundaryRange={0}
    defaultActivePage={1}
    ellipsisItem={null}
    firstItem={null}
    lastItem={null}
    siblingRange={1}
    totalPages={10}
  />
)

export default PaginationExampleCompact

is it a way to change its icon? For example with an icon from Semantic UI, I guess its easier like that.

Code sandbox: https://codesandbox.io/s/pedantic-wescoff-jsyrw?file=/example.js

Answer 1

You can do this by set prevItem and nextItem to the icons you like.

Like this:

<Pagination
  boundaryRange={0}
  defaultActivePage={1}
  ellipsisItem={null}
  firstItem={null}
  lastItem={null}
  prevItem={{content: <Icon name="angle double left" />}}
  nextItem={{content: <Icon name="angle double right" />}}
  siblingRange={1}
  totalPages={10}
/>

https://codesandbox.io/s/relaxed-silence-vqiww?file=/example.js

More info in the docs