Using icon components

MUI provides prebuilt SVG icons that we have to install by using the following command in the terminal:

npm install @mui/icons-material

Let's first implement the DELETE button in the grid. The MUI IconButton component can be used to render icon buttons. The @mui/icons-material package that we just installed contains lots of icons that can be used with MUI.

You can find the list of icons available from the MUI documentation. We need an icon for our DELETE button; therefore, we will use an icon called DeleteIcon:

1. Open the Carlist.js file and add the following imports:

   // Carlist.js
   import IconButton from '@mui/material/IconButton';
   import DeleteIcon from '@mui/icons-material/Delete';

2. Next, we will render the IconButton component in our grid. We will modify the DELETE button in the code where we define the grid columns. We change the button element to the IconButton component and render DeleteIcon inside the IconButton...