Material-Table: styling is overiding all custom and Material UI styling and icons not rendering

Question

I\'m trying to use Material-Table component - it\'s perfect for a table that I\'m buildling (add, edit, delete and search rows). I\'ve installed and used it as a child compo

Answer 1

to fix icons not showing you have to add :

import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = {
    Add: forwardRef((props, ref) => ),
    Check: forwardRef((props, ref) => ),
    Clear: forwardRef((props, ref) => ),
    Delete: forwardRef((props, ref) => ),
    DetailPanel: forwardRef((props, ref) => ),
    Edit: forwardRef((props, ref) => ),
    Export: forwardRef((props, ref) => ),
    Filter: forwardRef((props, ref) => ),
    FirstPage: forwardRef((props, ref) => ),
    LastPage: forwardRef((props, ref) => ),
    NextPage: forwardRef((props, ref) => ),
    PreviousPage: forwardRef((props, ref) => ),
    ResetSearch: forwardRef((props, ref) => ),
    Search: forwardRef((props, ref) => ),
    SortArrow: forwardRef((props, ref) => ),
    ThirdStateCheck: forwardRef((props, ref) => ),
    ViewColumn: forwardRef((props, ref) => )
  };

official docs : https://github.com/mbrn/material-table