How to customize shape of Material-UI tab indicator

Question

I am trying to turn the material-ui tab indicator into a triangle. At the moment, I can only manipulate the indicator into differently sized rectangles/squares. Is it possible to change it into an arrow or an upside down triangle?

Here is what I have so far:

Here is the code for the indicator:

TabIndicatorProps={{
                style: {
                  alignSelf: "flex-start",
                  height: "15px",
                  width: "15px",
                  transform: "translateY(-100px)",
                  backgroundImage: ArrowDropDownIcon,
                  backgroundColor: "#CC0202",
                  marginLeft: "6px",
                },
              }}

Answer 1

Instead of using the icon, you could create a triangle using CSS and I think it would give the same result you are looking for:

<Tabs
  TabIndicatorProps={{
    style: {
      width: 0,
      height: 0,
      borderLeft: "10px solid transparent",
      borderRight: "10px solid transparent",
      borderTop: "10px solid #f00",
      transform: "translateY(-100px)",
      alignSelf: "flex-start",
      marginLeft: "5px",
    },
  }}
  indicatorColor='primary.main'
>

---

edit:

There is also another way to do this which I think is better since it removes the dependency on borders and pixels, and you have more freedom with your shapes:

TabIndicatorProps={{
  style: {
    top: theme.spacing(2),
    height: 10, 
    width: 12,
    marginLeft: theme.spacing(1),
    backgroundColor: "#be0000",
    clipPath: 'polygon(0 0, 100% 0, 50% 100%)',
  },
}}

Also, since this version uses the clip path, which makes it so the background color only applies in the shape, there is no need to set the indicatorColor to the color your background.

I also replaced some of the formatting being done with pixels to use theme.spacing instead. It should help it be more responsive.