Skip to content

Commit

Permalink
Update customize-icons.mdx (#138)
Browse files Browse the repository at this point in the history
  • Loading branch information
dmhumphrey committed Oct 1, 2022
1 parent b88f821 commit a855991
Showing 1 changed file with 3 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ import Example from '../../../examples/font-awesome-icons';

Material React Table uses [Material Icons](https://mui.com/material-ui/material-icons) by default for all of its internal icons.

If you need to, you can customize and replace some or all of the icons with your own custom icons. You can either use other Material Icons, or icons from a completely different library.
If you need to, you can customize and replace some or all of the icons with your own custom icons. You can either use other Material Icons or icons from a completely different library.

### Relevant Props

<RootPropTable onlyProps={new Set(['icons'])} />

### Replace with Custom Icons

To replace a default icon, you specify the icon in the `icons` prop. You should get TS hints for the name of the icons you can replace, but you can also consult [this source file](https://github.com/KevinVandy/material-react-table/blob/main/src/icons.ts) for a list of all the icons you can replace.
To replace a default icon, specify the icon in the `icons` prop. You should get TS hints for the name of the icons you can replace, but you can also consult [this source file](https://github.com/KevinVandy/material-react-table/blob/main/src/icons.ts) for a list of all the icons you can replace.

```tsx
<MaterialTable
Expand All @@ -34,7 +34,7 @@ To replace a default icon, you specify the icon in the `icons` prop. You should
}}
```

> Some Icons have `style` props that get applied to them internally. So in order to preserve the ability of those Icons to be styled with the correct paddings, margins, or rotations, you should pass in `{...props}` to your custom Icon component as a best practice.
> Some icons have `style` props that get applied to them internally. So, in order to preserve the ability of those Icons to be styled with the correct paddings, margins, or rotations, you should pass in `{...props}` to your custom icon component as a best practice.

### Font Awesome Example

Expand Down

2 comments on commit a855991

@vercel
Copy link

@vercel vercel bot commented on a855991 Oct 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on a855991 Oct 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.