Can mui icons have their stroke width changed?

Question

I would like to customise the icons that come with @mui/material. Specifically, the empty checkbox icon (as well as empty radio). I would like to make the stroke thinner. I have tried setting stroke-width, font weight, font size (this just makes it smaller, not thinner). Is this possible?

I would like to avoid resorting to editing the underlying path if i can help it.

Answer 1

you cant change empty checkbox width because icon widths depend on path property not stroke value. you can check this link

Answer 2

Yes figured this out after quite a lot of searching and testing. Hope this helps 😊

Here are 2 ways to do it that I've been using:

1. With Material UI's sx styling method

import ArrowBackIcon from '@mui/icons-material/ArrowBack';

<ArrowBackIcon
     sx={{ 
          stroke: "blue",
          strokeWidth: 2
     }}
/>

2. With a styled-components method

I personally prefer this method to keep out a bunch of inline styles from my code...and helps to allow all of the style wrapping into the component or its related parts.

import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import styled from "styled-components";

export const StyledArrowBack = styled(ArrowBackIcon)`
    stroke: blue;
    stroke-width: 2;
`;