Action Icons appearing as plain text

Question

I am using material-table (https://material-table.com/#/) for a react project and I have imported the icons that I need to use, but inside the action bar the actions are appearing as plain text, and not as the Material Icon.

import React, { forwardRef } from 'react';
import MaterialTable from 'material-table';

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 Print from '@material-ui/icons/Print';
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 Table = ({columnData, data}) =>{
   const tableIcons = {
        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} />),
        Print: forwardRef((props, ref) => <Print {...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} />)
    };


    return (
        <MaterialTable
            columns={columnData}
            data={data}
            options={{
                search: false,
                toolbar: false,
                showTitle: false,
                sorting: false
            }}
            actions={[
                {
                    icon: 'Print',
                    tooltip: 'Print Label',
                    onClick: (event, rowData) => alert("You printed " + rowData.description)
                }
            ]}
            icons={tableIcons}
        />
    )
}

export default Table;

I would expect for the actual Print Icon to appear but it appears as text reading 'print'. Also occurs if I use lower case 'print'. If I use the table throws an error.

score 22 · Answer 1 · edited Oct 04 '19 at 18:45

22

I just used the same library and it is either an error in the documentation or code bug, anyway it is fixed as follows:

actions={[
  {
    icon: () => <AddBox />,
    tooltip: 'Add User',
    onClick: (event) => alert("You want to add a new row")
  }
]}

Obviously you must change the action and the icon to what you want to use.

edited Oct 04 '19 at 18:45

cloned

6,346
4
26
38

answered Oct 04 '19 at 18:22

Alejandro

220
3
8

1

This worked!!! I didn't to pass it as a function `actions={[{icon: }]}`, but the element itself... and it fixed the issue! Thank you Alejandro – Jose A Mar 09 '20 at 17:53

score 5 · Answer 2 · edited Jan 01 '20 at 17:13

I tried the following which solved the problem for me 1)Icon imported from material-ui/icons

import ExitToAppIcon from '@material-ui/icons/ExitToApp';
const tableIcons = {
LogOut: forwardRef((props, ref) => <ExitToAppIcon {...props} ref={ref} />)
}

2) Usage

<MaterialTable
  title="User List"
  icons={tableIcons} 
actions{[{icon:tableIcons.LogOut,tooltip:'LogoutUser',onClick(event,rowData)=>{console.log('Logout clicked')}}]}
/>

In your case it will be tableIcons.Print

score 3 · Accepted Answer · answered Jul 29 '19 at 14:29

3

I had that problem as well and updated the typescript docs accordinly. You have to wrap them in a function. And to enable the tooltip, you have to forward the ref since muiv4 like this:

Add: forwardRef((props, ref) => <Add {...props} ref={ref} color='action' />)

answered Jul 29 '19 at 14:29

Domino987

8,475
2
15
38

I am doing that in the tableIcons const. And the other icons are appearing, it just seems to be in the Actions Column that it doesn't work – eesteban Jul 29 '19 at 14:34
Oh i see, you have to write it lower case: icon: 'print' – Domino987 Jul 29 '19 at 14:36
Tried that as well, same outcome. It just changes the text to a lowercase 'p' – eesteban Jul 29 '19 at 14:37
Seems like a bug, I will try to PR a fix. – Domino987 Jul 29 '19 at 14:42
1

Ok so i looked into the implementation and if you want to use a custom element, you have to pass it as a element and not the string refernece. So if you jsut remove the '' from your icon, it will pass the material-ui icon from the import as prop, which will be render correctly: icon: Print, where Print is import Print from '@material-ui/icons/Print'; – Domino987 Jul 29 '19 at 14:53
Like this? ```actions={[ { icon: print, tooltip: 'Print Label', onClick: (event, rowData) => alert("You printed " + rowData.description) } ]}``` – eesteban Jul 29 '19 at 14:57
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/197167/discussion-between-domino987-and-eesteban). – Domino987 Jul 29 '19 at 14:58
Solve: actions={[ { icon: Print, tooltip: 'Print Label', onClick: (event, rowData) => alert("You printed " + rowData.description) } ]} – eesteban Jul 29 '19 at 15:01

Action Icons appearing as plain text

3 Answers3