[icons] Gavel Icon Outlined not outlined about material-ui HOT 1 OPEN

To achieve the expected behavior where the outlined gavel icon has the inside not filled in, you need to customize the icon using Material-UI icons. You can leverage the createTheme and ThemeProvider components from Material-UI to customize the icon color.

Here's a step-by-step guide on how you can make this adjustment:

1. In your React project, make sure you have installed @mui/icons-material version 5.15.17.
2. Locate the component or file where you are rendering the gavel icons in your project.
3. Add the following imports from Material-UI at the top of your file:

import { createTheme, ThemeProvider } from '@mui/system';

4. Create a custom theme to set the inside color of the outlined gavel icon as transparent. Define your custom theme by adding the following code before the component where you are rendering the icons:

const theme = createTheme({
  components: {
    MuiSvgIcon: {
      styleOverrides: {
        root: {
          '&.MuiOutlined': {
            '& path': {
              fill: 'transparent',
            },
          },
        },
      },
    },
  },
});

5. Wrap the rendering of your gavel icons with the ThemeProvider component and pass in the theme you just created. Your component should look like this:

<ThemeProvider theme={theme}>
    // Render your gavel icons here
</ThemeProvider>

By following these steps, you should now see the outlined gavel icon with the inside not filled in, as the inside color will be set to transparent based on the custom theme you applied using Material-UI.

from material-ui.