how to change color of mui button icon in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To change color of mui button icon in React js, set color: #f0da17; in MuiSvgIcon-root. It will change color of mui button icon.

Today, I am going to show you, how to change color of mui button icon in react js.

Installation

Install the following packages to use mui button icon in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

First method: Inline CSS

MUI material change color of mui button icon example.

The below code is an example of changing color of mui button icon using mui button.

App.js

import * as React from 'react';
import IconButton from "@mui/material/IconButton";
import SaveIcon from '@mui/icons-material/Save';
import { Button } from "@mui/material";
import "./App.css"

export default function App() {
  return (
    <div>
      <Button variant="contained" startIcon={<SaveIcon sx={{ color: "red" }} />}>Save</Button>
      <IconButton size="large">
      </IconButton>
    </div>
  );
}

In the above code example, I have used the @mui/material component and changed color of mui button icon of MUI.

Check the output of the above code example.

Second Method: External CSS

MUI material change color of mui button icon example.

The below code is an example of changing color of mui button icon using mui button.

App.js

import * as React from 'react';
import IconButton from "@mui/material/IconButton";
import SaveIcon from '@mui/icons-material/Save';
import { Button } from "@mui/material";
import "./App.css"

export default function App() {
  return (
    <div>
      <Button variant="contained" startIcon={<SaveIcon />}>Save</Button>
      <IconButton size="large">
      </IconButton>
    </div>
  );
}

.MuiSvgIcon-root {
  color: #f0da17;
}

In the above code example, I have used the @mui/material component and changed color of mui button icon of MUI.

Check the output of the above code example.

All the best 👍