Вы можете сделать свой стиль динамичным. Вот ответ: ответ stackoverflow

Вы должны быть осторожны с тем, что вы перезаписываете

С Уважением

Самый простой способ указать / переопределить цвет значка в Material-UI - использовать настраиваемый Имя класса CSS.

Предположим, вы хотите показать зеленый флажок, а не красный треугольник, в зависимости от результата некоторого процесса.

Вы создаете функцию где-то внутри своего кода, например, так:

function iconStyles() {
  return {
    successIcon: {
      color: 'green',
    },
    errorIcon: {
      color: 'red',
    },
  }
}

Затем вы применяете makeStyles к этой функции и запускаете результат.

import { makeStyles } from '@material-ui/core/styles';
...

const classes = makeStyles(iconStyles)();

Теперь внутри вашей функции рендеринга вы можете использовать объект classes:

  const chosenIcon = outcome
    ? <CheckCircleIcon className = {classes.successIcon} />
    : <ReportProblemIcon className = {classes.errorIcon} />;

Функция, которую я упомянул первой в этом ответе, фактически принимает тему в качестве входных данных и позволяет вам изменять / обогащать эту тему: это гарантирует, что ваши пользовательские классы не будут рассматриваться как исключения, а скорее как интеграции внутри более комплексного визуального решения (например, , цвета значков в теме лучше всего отображаются как кодировки).

Material-UI очень богат, и я бы посоветовал вам изучить также другие существующие механизмы настройки.

Самый простой способ, который я нашел, - это использовать следующее.

import { styled } from '@material-ui/styles';
import { Visibility } from '@material-ui/icons';

const MyVisibility = styled(Visibility)({
    color: 'white',
});

Вы можете использовать SvgIcon из документация:

The SvgIcon component takes an SVG path element as its child and converts it to a React component that displays the path, and allows the icon to be styled and respond to mouse events. SVG elements should be scaled for a 24x24px viewport.

Вы должны использовать devTools для извлечения пути к значку KeyboardArrowRightIcon:

Затем используйте его со своим индивидуальным цветом, например:

<SvgIcon
  component = {svgProps => {
    return (
      <svg {...svgProps}>
        {React.cloneElement(svgProps.children[0], {
          fill: myColorVariable
        })}
      </svg>
    );
  }}
>
   <path d = "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path>
</SvgIcon>

У меня была такая же проблема, мое решение было:

import React from 'react';
import pure from 'recompose/pure';
import {SvgIcon} from '@material-ui/core';

let smile = (props) => (
 <SvgIcon {...props}
  component = {props => {
    return (
      <svg {...props}>
        {React.cloneElement(props.children[0], {
          fill: "#4caf50"
        })}
      </svg>
    );
  }}
>
   <path d = "M256,32C132.281,32,32,132.281,32,256s100.281,224,224,224s224-100.281,224-224S379.719,32,256,32z M256,448
            c-105.875,0-192-86.125-192-192S150.125,64,256,64s192,86.125,192,192S361.875,448,256,448z M160,192c0-26.5,14.313-48,32-48
            s32,21.5,32,48c0,26.531-14.313,48-32,48S160,218.531,160,192z M288,192c0-26.5,14.313-48,32-48s32,21.5,32,48
            c0,26.531-14.313,48-32,48S288,218.531,288,192z M384,288c-16.594,56.875-68.75,96-128,96c-59.266,0-111.406-39.125-128-96"></path>
</SvgIcon>
);
smile = pure(smile);
smile.displayName = 'smile';
smile.muiName = 'SvgIcon';

export default smile;

Это то, что я делаю

Использую MUI v4.5.1. Используйте опору colorAPI с наследуемым значением, добавьте вокруг него обертку div или span и добавьте туда свой цвет.

Из документации API

color default value:inherit. The color of the component. It supports those theme colors that make sense for this component.

Добавить значок звездочки

import React from 'react';
import Star from '@material-ui/icons/StarRounded';
import './styles.css';

export function FavStar() {
  return (
    <div className = "star-container">
      <Star size = "2em" fontSize = "inherit" />
    </div>
  );
}

В style.css

.star-container {
  color: red;
  font-size: 30px;
}

Просто добавьте стиль fill: "green"

Пример: <Star style = {{fill: "green"}}/>

Единственное правильное решение, которое охватывает двухцветные (двухтональные) значки, - передать ему свойство htmColor:

React.createElement(Icon, {htmlColor: "#00688b"})

Вы можете установить цвет по умолчанию для всех значков, создав настраиваемая тема с createMuiTheme():

createMuiTheme({
  props: {
    MuiSvgIcon: {
      htmlColor: '#aa0011',
    }
  }
})

Это установит значение свойства htmlColor по умолчанию для каждого значка, такого как <KeyboardArrowRightIcon/>. Вот список других реквизитов, которое вы можете установить.

Изменить цвет значка

<HomeIcon />
<HomeIcon color = "primary" />
<HomeIcon color = "secondary" />
<HomeIcon color = "action" />
<HomeIcon color = "disabled" />
<HomeIcon style = {{ color: green[500] }} />
<HomeIcon style = {{ color: 'red' }} />

Изменить размер значка

<HomeIcon fontSize = "small" />
<HomeIcon />
<HomeIcon fontSize = "large" />
<HomeIcon style = {{ fontSize: 40 }} />

MDI с использованием компонента Icon

<Icon>add_circle</Icon>
<Icon color = "primary">add_circle</Icon>
<Icon color = "secondary">add_circle</Icon>
<Icon style = {{ color: green[500] }}>add_circle</Icon>
<Icon fontSize = "small">add_circle</Icon>
<Icon style = {{ fontSize: 30 }}>add_circle</Icon>

Для шрифта

<Icon className = "fa fa-plus-circle" />
<Icon className = "fa fa-plus-circle" color = "primary" />
<Icon className = "fa fa-plus-circle" color = "secondary" />
<Icon className = "fa fa-plus-circle" style = {{ color: green[500] }} />
<Icon className = "fa fa-plus-circle" fontSize = "small" />
<Icon className = "fa fa-plus-circle" style = {{ fontSize: 30 }} />

Ресурсы, чтобы узнать об этом больше, Иконки

Просто добавьте стиль в компонент значка

<KeyboardArrowRightIcon style = {{color:"red"}} />

Но вы можете использовать условный стиль, как показано ниже

    import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Icon from "@material-ui/core/Icon";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > span": {
      margin: theme.spacing(2)
    }
  }
}));

export default function Icons() {
  //let we want chnage the icon color of
  // somecontition varaiable is not empty
  const somecontition = "some";
  //here is some different style objects
  const style = {  // old style object
    color: "red"
  };
  const new_style = { //new style  object
    color: "blue"
  };
  const classes = useStyles();

  return (
    <div className = {classes.root}>
      {/* if somecondition var is not empty the use new_style other wise it will use old style*/}
      <Icon style = {somecontition ? style : new_style}>add_circle</Icon>
    </div>
  );
}

Замена цвета значка пользовательского интерфейса материала, как показано ниже

в js

        const [activeStar, setActiveStar] = useState(false);

        <IconButton onClick = {() => setActiveStar(!activeStar)}>
          {activeStar ? (
            <StarOutlined className = "starBorderOutlined" />
          ) : (
            <StarBorderOutlined />
          )}
        </IconButton>

в Css

      .starBorderOutlined {
        color: #f4b400 !important;
       }

Удивлен, что еще никто не предложил решения для всего сайта.

Вы можете переопределить цвета, назначенные для параметра «цвета» здесь https://material-ui.com/api/icon/#props

добавив переопределение к вашей теме (вам нужно будет определить собственную тему, если вы еще этого не сделали) https://material-ui.com/customization/theming/#createmuitheme-options-args-theme

Однако после определения темы это так же просто, как

const theme = createMuiTheme({
  "overrides": {
    MuiSvgIcon: {
      colorPrimary: {
        color: ["#625b5b", "!important"],
      },
      colorSecondary: {
        color: ["#d5d7d8", "!important"],
      },
    },
    ...
});

Можно сделать так: <PlusOne htmlColor = "#ffaaee" />