CODEWITHSUNDEEP
cssreactjsmaterial-ui
Min
Min

Reputation: 528

Is there a way to use custom icon for material ui's pagination

Is there a way to use a custom icon for pagination in material ui?

Material UI Pagination Documentation , CodeSandbox Demo

I would like to change the default left and right chevron (for navigation)

enter image description here

Is there a way to achieve this using material ui's existing component?

Upvotes: 2

Views: 3200

Answers (1)

Raj Kumar
Raj Kumar

Reputation: 854

you cant change only the icon directly but you can customize complete pagination using usePagination

Edit Material demo

<ul className={classes.ul}>
  {items.map(({ page, type, selected, ...item }, index) => {
    let children = null;

    if (type === 'start-ellipsis' || type === 'end-ellipsis') {
      children = '…';
    } else if (type === 'page') {
      children = (
        <IconButton  style={{ 
          fontWeight: selected ? 'bold' : undefined, 
         backgroundColor: selected ? 'rgba(0, 0, 0, 0.04)' : 'white',
          width: 50, 
          height:50
        }} {...item}>
          {page}
        </IconButton >
      );
    } else {
      children = (
        <IconButton  {...item}>
          {type === 'previous' ? <FastRewindIcon/> : <FastForwardIcon/>}
        </IconButton >
      );
    }
    return <li key={index} style={{ margin: 'auto 0'}}>{children}</li>;
  })}
</ul>

Upvotes: 4

Related Questions