Material-table: Missing icons

[Diaver]

Hello!
Looks like, there is an issue with missing icons on the latest version 0.9.12:

[mbrn]

Hi @Diaver,

Can you add material icons to your html page' head sections

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

[Diaver]

Issue fixed, thanks!
Maybe, make sense add and use icons from npm package, not cdn ?

[mbrn]

It increases the bundle size too much. So i decided to cdn

[jakeleventhal]

So there are no plans to ever use the native material icons from material-ui?

[mbrn]

Unfortunately. But can you try remove icons from html and add @material-ui/icons package to your project. it should work. But i did'n try

[sfDev001]

Is there a procedure to change from cdn to @ material-ui / icons package?
Because I use Electron, I want to display even when the network can not be connected.

[mbrn]

Look at this:

https://github.com/mbrn/material-table/issues/93#issuecomment-457015457

[chipopo1337]

Is there a procedure to change from cdn to @ material-ui / icons package?
Because I use Electron, I want to display even when the network can not be connected.

What I did was

1. I downloaded the .woff2 from the url property on the fonts.googleapis.com link (https://fonts.googleapis.com/icon?family=Material+Icons),
2. copied it into my local project's source folder
3. set the url property to the directory of it inside my fonts folder and
4. added it to my App.css (I'm using CRA).

[muralikrishnana]

import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
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) => )
};

icons={tableIcons}
...
/>

it works

(from offcial docs https://github.com/mbrn/material-table)

[tratanhieu]

import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
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) => )
};

icons={tableIcons}
...
/>

it works

(from offcial docs https://github.com/mbrn/material-table)

Thanks you so much, it work

[ricostone]

For Typescript people :

const tableIcons : Icons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};

[sathyaincampus]

The above ones also didn't work for me. I'm using typescript FYI.

Finally this is what worked

import React from 'react';
import MaterialTable from "material-table";
import { forwardRef } from 'react';
import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
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:React.Ref<SVGSVGElement>) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <ArrowUpward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <ViewColumn {...props} ref={ref} />)
};

<MaterialTable
          columns={[
            { title: "Adı", field: "name" },
            { title: "Soyadı", field: "surname" },
            { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
            {
              title: "Doğum Yeri",
              field: "birthCity",
              lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
            }
          ]}
          icons={tableIcons}
          data={[
            { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
          ]}
          title="Demo Title"
        />

Note:

ref:React.Ref<SVGSVGElement> in forwardRef is what really matters here

Output:

Info - Versions used:

react: 16.9.11
node: 10.9.0
npm: 6.2.0

[josmithua]

@sathyaincampus Your problem was your variable declaration:

const tableIcons = { ... };

should be:

const tableIcons: Icons = { ... };

@ricostone's solution works fine.

Cheers!

[PubuduArosha]

*Try icons={tableIcons}in MaterialTable class *

const tableIcons = {
      Add: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <AddBox {...props} ref={ref} />),
      Check: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Check {...props} ref={ref} />),
      Clear: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Clear {...props} ref={ref} />),
      Delete: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <DeleteOutline {...props} ref={ref} />),
      DetailPanel: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <ChevronRight {...props} ref={ref} />),
      Edit: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Edit {...props} ref={ref} />),
      Export: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <SaveAlt {...props} ref={ref} />),
      Filter: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <FilterList {...props} ref={ref} />),
      FirstPage: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <FirstPage {...props} ref={ref} />),
      LastPage: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <LastPage {...props} ref={ref} />),
      NextPage: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <ChevronRight {...props} ref={ref} />),
      PreviousPage: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <ChevronLeft {...props} ref={ref} />),
      ResetSearch: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Clear {...props} ref={ref} />),
      Search: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Search {...props} ref={ref} />),
      SortArrow: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <ArrowUpward {...props} ref={ref} />),
      ThirdStateCheck: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <Remove {...props} ref={ref} />),
      ViewColumn: forwardRef((props, ref:React.Ref<SVGSVGElement>) => <ViewColumn {...props} ref={ref} />)
    };

<MaterialTable

      title="Users Management"
      icons={tableIcons} // **Solution**
      columns={state.columns}
      data={state.data}
      editable={{
        onRowAdd: newData =>
          new Promise(resolve => {
            setTimeout(() => {
              resolve();
              setState(prevState => {
                const data = [...prevState.data];
                data.push(newData);
                return { ...prevState, data };
              });
            }, 600);
          }),

        onRowUpdate: (newData, oldData) =>
          new Promise(resolve => {
            setTimeout(() => {
              resolve();
              if (oldData) {
                setState(prevState => {
                  const data = [...prevState.data];
                  data[data.indexOf(oldData)] = newData;
                  return { ...prevState, data };
                });
              }
            }, 600);
          }),

        onRowDelete: oldData =>
          new Promise(resolve => {
            setTimeout(() => {
              resolve();
              setState(prevState => {
                const data = [...prevState.data];
                data.splice(data.indexOf(oldData), 1);
                return { ...prevState, data };
              });
            }, 600);
          }),
      }}
    />

[orange-beans]

For Typescript people :

const tableIcons : Icons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};

Not working, your code is no difference from the original one...

[v-zo]

a bit cleaner way:

export const iconsMap = {
    Add: AddBox,
    Check,
    Clear,
    Delete: DeleteOutline,
    DetailPanel: ChevronRight,
    Edit,
    Export: SaveAlt,
    Filter: FilterList,
    FirstPage,
    LastPage,
    NextPage: ChevronRight,
    PreviousPage: ChevronLeft,
    ResetSearch: Clear,
    Search,
    SortArrow: ArrowDownward,
    ThirdStateCheck: Remove,
    ViewColumn
};

type IconsDict = Dictionary<ForwardRefExoticComponent<RefAttributes<SVGSVGElement>>>;

export const icons = Object.entries(iconsMap).reduce<Icons>((acc, [iconName, IconComponent]) => {
    (acc as IconsDict)[iconName] = forwardRef((props, ref) => <IconComponent {...props} ref={ref} />);
    return acc;
}, {});

[baocancode]

Here is my version for TypeScript, inspired by @v-zo

const iconComponentByTableIconType: Record<keyof Icons, typeof SvgIcon> = {
  Add: AddBox,
  Check,
  Clear,
  Delete: DeleteOutline,
  DetailPanel: ChevronRight,
  Edit,
  Export: SaveAlt,
  Filter: FilterList,
  FirstPage,
  LastPage,
  NextPage: ChevronRight,
  PreviousPage: ChevronLeft,
  ResetSearch: Clear,
  Search,
  SortArrow: ArrowDownward,
  ThirdStateCheck: Remove,
  ViewColumn,
}

const tableIcons = Object.entries(iconComponentByTableIconType).reduce(
  (currentTableIcons: Icons, [tableIconType, IconComponent]) => {
    currentTableIcons[tableIconType as keyof Icons] = forwardRef((props, ref: Ref<SVGSVGElement>) => (
      <IconComponent {...props} ref={ref} />
    ))
    return currentTableIcons
  },
  {},
)

[creative-dev-lab]

import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
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) => )
};

icons={tableIcons}
...
/>

it works

(from offcial docs https://github.com/mbrn/material-table)

You saved my day~~ Thanks!

[semopz]

Anyone have any idea on how to make this a bit more reusable than just exporting the tableIcons object and remembering to include in all instances of <MaterialTable />? I tried wrapping MaterialTable but I ran into some TS issues.

import MaterialTable, { MaterialTableProps } from 'material-table';
import { tableIcons } from 'somewhere'

type TableProps<RowData extends object> = Omit<MaterialTableProps<RowData>, 'icons'>; //this is fine

export const Table: FC<TableProps> = props =>
  <MaterialTable icons={tableIcons} {...props}/>; //what do we pass to TableProps?
// Generic type 'TableProps' requires 1 type argument(s).ts(2314)

[gmarshall56]

Out of all of the suggested postings here the only one that worked for me is the first one posted on October 12, 2018 by mbrn whereby I added a link to the googleapis.com page for the Material Icons.

[earllapura]

For Typescript people :

const tableIcons : Icons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};

When you have your react/display-name rule upheld, this code will be tagged with Component definition is missing display name. I had to disable it for the file to pass.

[muhammadhamza4338]

import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
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) => )
};

icons={tableIcons}
...
/>

it works

(from offcial docs https://github.com/mbrn/material-table)

But Edit icon is not showing there.

[williambrode]

@muhammadhamza4338 maybe you are having the same problem as me. In one of the samples on the material-table site they have:

actions={[
        {
          tooltip: 'Remove All Selected Users',
          icon: 'delete',
          onClick: (evt, data) => alert('You want to delete ' + data.length + ' rows')
        }
      ]}

But using this with the imports doesn't properly display the Delete icon. I'm trying to figure out how to properly reference the icon here.

[muhammadhamza4338]

Waiting for your reply. I hope you will do something about this. Thanks

On Thu, Oct 22, 2020, 3:31 AM William Brode [e-mail]
wrote:

@muhammadhamza4338 https://github.com/muhammadhamza4338 maybe you are
having the same problem as me. In one of the samples on the material-table
site they have:

actions={[
{
tooltip: 'Remove All Selected Users',
icon: 'delete',
onClick: (evt, data) => alert('You want to delete ' + data.length + ' rows')
}
]}

But using this with the imports doesn't properly display the Delete icon.
I'm trying to figure out how to properly reference the icon here.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mbrn/material-table/issues/51#issuecomment-713913809,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/APPN6KV7RJ5SKYVAO4WD3HTSL5OKTANCNFSM4F3FVO2Q
.

[williambrode]

In my case replacing
icon: 'delete',
with
icon: tableIcons.Delete,
worked. Hope that helps you too.

[muhammadhamza4338]

But i am getting all the icons inside "MaterialTable" like
"icons={tableIcons}", now will you please tell me how can i separately
excess Edit bcz all other icons are working fin

On Thu, Oct 22, 2020, 4:15 AM William Brode [e-mail]
wrote:

In my case replacing
icon: 'delete',
with
icon: tableIcons.Delete,
worked. Hope that helps you too.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mbrn/material-table/issues/51#issuecomment-713955026,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/APPN6KXILQQCWWOJKWVAZBDSL5TSVANCNFSM4F3FVO2Q
.

[muhammadhamza4338]

Thanks dear now edit icon is showing in table but will you plz tell me that
if i click on edit icon then how will it shows row data using onClick

On Thu, Oct 22, 2020, 10:39 AM Hamza Amin [e-mail] wrote:

But i am getting all the icons inside "MaterialTable" like
"icons={tableIcons}", now will you please tell me how can i separately
excess Edit bcz all other icons are working fin

On Thu, Oct 22, 2020, 4:15 AM William Brode [e-mail]
wrote:

In my case replacing
icon: 'delete',
with
icon: tableIcons.Delete,
worked. Hope that helps you too.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mbrn/material-table/issues/51#issuecomment-713955026,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/APPN6KXILQQCWWOJKWVAZBDSL5TSVANCNFSM4F3FVO2Q
.

[williambrode]

@muhammadhamza4338 this is thread is for a particular issue - if you are having a different one you should look elsewhere for help.

[muhammadhamza4338]

Ok dear thank you very much

On Thu, Oct 22, 2020, 8:40 PM William Brode [e-mail]
wrote:

@muhammadhamza4338 https://github.com/muhammadhamza4338 this is thread
is for a particular issue - if you are having a different one you should
look elsewhere for help.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mbrn/material-table/issues/51#issuecomment-714581025,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/APPN6KSIHIAG3YTPHTA6DXLSMBG7FANCNFSM4F3FVO2Q
.