¿Cómo cambiar el color de los íconos usando Material-UI en ReactJS?

Material-UI icons es un módulo basado en React . La biblioteca Material-UI proporciona a los usuarios la interfaz más eficiente, efectiva y fácil de usar. React proporciona más de 1000 íconos Material-UI. Es uno de los frameworks más populares y demandados. Para usar Material-UI en React, necesitamos instalar los íconos Material-UI y Material-UI. Además, para el estilo personalizado, siempre puede consultar la API del componente de icono SVG en Material-UI.

requisitos previos:

• Aplicación ReactJS ya creada

A continuación, se describen todos los pasos en orden para agregar colores a los íconos.

Instalación:

• Paso 1 : antes de continuar, primero debemos instalar el módulo Material-UI, ejecutando el siguiente comando en el directorio de su proyecto, con la ayuda de la terminal en su carpeta src o también puede ejecutar este comando en la terminal de Visual Studio Code en carpeta de su proyecto.

npm install @material-ui/core 

• Paso 2: después de instalar el módulo Material-UI, ahora instale los iconos de Material-UI ejecutando el siguiente comando en el directorio de su proyecto, con la ayuda de un terminal en su carpeta src o también puede ejecutar este comando en el terminal de Visual Studio Code en carpeta de su proyecto.

npm install @material-ui/icons

• Paso 3 : después de instalar los módulos, ahora abra su archivo App.js que está presente dentro del directorio de su proyecto, en la carpeta src, y elimine el código presente en su interior.
• Paso 4 : Ahora, después de la instalación, podemos cambiar los colores del ícono usando la propiedad de color del componente del ícono. También podemos usar el accesorio de estilo para lo mismo.
• Paso 5 : ahora importa React, colores principales de Material-UI y módulos de iconos de Material-UI
• Paso 6 : en su archivo app.js, agregue este fragmento de código para importar React, colores principales de Material-UI y módulos de íconos de Material-UI.

import React from 'react';
import green from "@material-ui/core/colors/green";
import MailIcon from "@material-ui/icons/Mail";

A continuación se muestra un programa de muestra para ilustrar el uso de color prop:

Ejemplo 1 : Cambiar el color del icono a verde.

• aplicación.js:

import React from 'react';
  
// Importing the color of your choice from Material-UI 
import green from "@material-ui/core/colors/green";
  
// Importing Home icon from Material-UI . You can refer to the 
// API of this SVG icon component in Material-UI
import HomeIcon from "@material-ui/icons/HomeTwoTone";
  
export default function App() {
  return (
    <div classname="App">
      <h1><center>GeeksForGeeks</center></h1>
      {/* We provide inline css to make the color of the home 
          icon as green. We use style prop for the same. */}
      <center><HomeIcon style={{ color: "green" }} /></center>
      <h2><center>Let's start</center></h2>
    </div>
  );
}

• Producción

Ejemplo 2 : Cambiar el color del icono a rojo.

• aplicación.js:

import React from 'react';
  
// Importing the color of your choice from Material-UI 
import red from "@material-ui/core/colors/red";
  
// Importing Home icon from Material-UI . You can refer to 
// the API of this SVG icon component in Material-UI
import HomeIcon from "@material-ui/icons/HomeTwoTone";
  
export default function App() {
  return (
    <div classname="App">
      <h1><center>GeeksForGeeks</center></h1>
      {/* We provide inline css to make the color of the
          home icon as green. We use style prop for the same. */}
      <center><HomeIcon style={{ color: "red" }} /></center>
      <h2><center>Let's start</center></h2>
    </div>
  );
}

• Producción

Por lo tanto, siguiendo los pasos mencionados anteriormente, podemos usar Material-UI para importar y cambiar el color de los íconos en React.