[icons] Gavel Icon Outlined not outlined

[Rishi556]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-pfmck1?file=Demo.tsx

Steps:

1. View The Gavel Icon And The Outlined Gavel Icon
2. Notice how similar they are

Current behavior

Both are filled in

Expected behavior

Outlined icon to have the inside not be filled in

Context

The gavel icon outlined version should have the inside be transparent rather than being filled in.

Your environment

Using "@mui/icons-material": "^5.15.17"

Search keywords: gavel material icons

[cw235]

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.