How do you invert the primary and background colors of a material-ui icon?

How can I achieve the style of the icon to right of the screenshot? <ArrowForwardIosIcon /> gives me the left icon but I would like to output the one to the right.

>Solution :

You can find the code that controls the display of the icons in the dialog that pops up from the icon-search portion of the documentation here: https://github.com/mui/material-ui/blob/v5.11.6/docs/data/material/components/material-icons/SearchIcons.js#L233

Below is an example that applies equivalent styling using the sx prop. The key aspect is setting the color and background-color appropriately in the styling. The rest of the styling just controls the size and shape of the box the icon is in.

import * as React from "react";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";

export default function SvgIconsColor() {
  return (
    <>
      <ArrowForwardIosIcon
        sx={{
          margin: 0.5,
          px: 2,
          py: 1,
          borderRadius: 1,
          boxSizing: "content-box",
          color: "primary.main"
        }}
      />
      <ArrowForwardIosIcon
        sx={{
          margin: 0.5,
          px: 2,
          py: 1,
          borderRadius: 1,
          boxSizing: "content-box",
          color: "primary.contrastText",
          backgroundColor: "primary.main"
        }}
      />
    </>
  );
}