Using the MUI Icon and IconButton components

In this section, we will use the IconButton component for the EDIT and DELETE buttons in the grid. MUI provides pre-built 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, which we just installed, contains lots of icons that can be used with MUI.

You can find a list of icons available in the MUI documentation (https://mui.com/material-ui/material-icons/). There is a search functionality, and if you click any of the icons in the list, you can find the correct import statement for a specific icon:

Figure 14.3: Material Icons

We need an icon for our DELETE button, so we will use an icon called DeleteIcon:

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

   // Carlist.tsx
   import...