Icônes d'action apparaissant en texte brut

Question

J'utilise material-table ( https://material-table.com/#/ ) pour un projet React et j'ai importé les icônes que je dois utiliser, mais à l'intérieur de la barre d'actions les actions apparaissent sous forme de texte brut et non sous forme d'icône de matériau.

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;

Je m'attendrais à ce que l'icône d'impression réelle apparaisse, mais elle apparaît sous la forme d'un texte indiquant "imprimer". Se produit également si j'utilise "imprimer" en minuscules. Si j'utilise la table jette une erreur.

Answer 1

J'ai essayé ce qui suit qui a résolu le problème pour moi 1) Icône importée de material-ui/icons

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

2) Utilisation

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

Dans votre cas, ce sera tableIcons.Print