React MUI SvgIcon API

Last Updated : 04 Aug, 2022

MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI SvgIcon API. The Icon are used to display some information in form of vector images that scale without distortion. The SvgIcon is used to create some custom icons and then display it. The API provides a lot of functionality and we will learn to implement them.

Import SvgIcon API

import SvgIcon from '@mui/material/SvgIcon';
// or
import { SvgIcon } from '@mui/material';

Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.

children (node): It is a component similar to the table row.
classes (Object): Override the existing styles or add new styles to the component.
component (elementType): It is the component used for the root node. It can be either an HTML string or a component.
sx (Array<func / object/bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles
color (string): It is used to set the colour of the icon. The default value is inherit.
fontSize (string): It is used to set the font size of the icon. The default value is medium.
htmlColor (string): The color is applied to the icon.
inheritViewBox (bool): If set to true, the root node will inherit the custom component’s viewBox and the viewBox prop will be ignored. The default value is false.
shapeRendering (string): It is used to set the shapeRendering.
titleAccess (string): It provides the human-readable title for the element.
viewBox (string): Allows to define the coordinates of the SVG. The default value is 0 0 24 24.

CSS Rules:

root (.MuiSvgIcon-root): It is the style applied to the root element.
colorPrimary (.MuiSvgIcon-colorPrimary): It is the style applied to the root element if the color is set to primary.
colorSecondary (.MuiSvgIcon-colorSecondary): It is the style applied to the root element if color is set to secondary.
colorAction (.MuiSvgIcon-colorAction): It is the styles applied to the root element if color is set to action.
colorError (.MuiSvgIcon-colorError): It is the style applied to the root element if the color is set to error.
colorDisabled (.MuiSvgIcon-colorDisabled): It is the style applied to the root element if the color is set to disabled.
fontSizeInherit (.MuiSvgIcon-fontSizeInherit): It is the styles applied to the root element if fontSize is set to inherit.
fontSizeSmall (.MuiSvgIcon-fontSizeSmall): It is the styles applied to the root element if fontSize is set to small.
fontSizeLarge (.MuiSvgIcon-fontSizeLarge): It is the styles applied to the root element if fontSize is set to large.

Syntax: Create a SvgIcon as follows:

<SvgIcon>
     <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</SvgIcon>

Installing and Creating React app, and adding the MUI dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react @emotion/styled @mui/lab @mui/icons-material

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have three SvgIcons.

App.js

import "./App.css"; 
import * as React from "react"; 
import { SvgIcon } from "@mui/material"; 
function App() { 
    return ( 
        <div className="App"> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI SvgIcon API</strong> 
            </div> 
            <br /> 
            <div 
                style={{ 
                    display: "flex", 
                    justifyContent: "space-evenly", 
                }} 
            > 
                <SvgIcon> 
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> 
                </SvgIcon> 
                <SvgIcon> 
                    <path d="M20 12c0-2.54-1.16-4.81-3.04-6.27L16  
                    0H8l-.95 5.73C5.19 7.19 4 9.45 4 12s1.19 4.81  
                    3.05 6.27L8 24h8l.96-5.73C18.81 16.81 20 14.54  
                    20 12zM6 12c0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 
                    6-6 6-6-2.69-6-6z" /> 
                </SvgIcon> 
                <SvgIcon viewBox="0 0 32 32"> 
                    <path d="M16 32c8.837 0 16-7.163 16-16s-7.163-16-16-16-16  
                   7.163-16 16 7.163 16 16 16zM16 3c7.18 0 13 5.82 13  
                   13s-5.82 13-13 13-13-5.82-13-13 5.82-13 13-13z"> 
                    </path> 
                    <path d="M20 21c0 2.761-1.791 5-4 5s-4-2.239-4-5c0-2.761  
                   1.791-5 4-5s4 2.239 4 5z"> 
                    </path> 
                    <path d="M13 10.625c-0.256 0-0.512-0.098-0.707-0.293-0.604 
                   -0.604-1.982-0.604-2.586 0-0.39 0.391-1.024 0.391-1.414 
                   0s-0.391-1.024 0-1.414c1.392-1.392 4.023-1.392 5.414 
                   0 0.391 0.39 0.391 1.024 0 1.414-0.195 0.195-0.451  
                   0.293-0.707 0.293z"> 
                    </path> 
                    <path d="M23 10.625c-0.256 0-0.512-0.098-0.707-0.293-0.604 
                   -0.604-1.982-0.604-2.586 0-0.39 0.391-1.024 0.391-1.414 
                   0s-0.391-1.024 0-1.414c1.392-1.392 4.023-1.392 5.414  
                   0 0.391 0.39 0.391 1.024 0 1.414-0.195 0.195-0.451  
                   0.293-0.707 0.293z"> 
                    </path> 
                </SvgIcon> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

Output:

Example 2: In the following example, we have SvgIcon in different colors.

App.js

import "./App.css"; 
import * as React from "react"; 
import { SvgIcon } from "@mui/material"; 
function App() { 
    return ( 
        <div className="App"> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI SvgIcon API</strong> 
            </div> 
            <br /> 
            <div 
                style={{ 
                    display: "flex", 
                    justifyContent: "space-evenly", 
                }} 
            > 
                <SvgIcon color="warning"> 
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> 
                </SvgIcon> 
                <SvgIcon color="success"> 
                    <path d="M20 12c0-2.54-1.16-4.81-3.04-6.27L16 0H8l-.95  
                   5.73C5.19 7.19 4 9.45 4 12s1.19 4.81 3.05 6.27L8  
                   24h8l.96-5.73C18.81 16.81 20 14.54 20 12zM6 12c0-3.31  
                   2.69-6 6-6s6 2.69 6 6-2.69 6-6 6-6-2.69-6-6z" /> 
                </SvgIcon> 
                <SvgIcon viewBox="0 0 32 32" color="secondary"> 
                    <path d="M16 32c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 
                   16 7.163 16 16 16zM16 3c7.18 0 13 5.82 13 13s-5.82  
                   13-13 13-13-5.82-13-13 5.82-13 13-13z"></path> 
                    <path d="M20 21c0 2.761-1.791 5-4 5s-4-2.239-4-5c0-2.761 1.791-5 
                   4-5s4 2.239 4 5z"></path> 
                    <path d="M13 10.625c-0.256 0-0.512-0.098-0.707-0.293-0.604-0.604 
                   -1.982-0.604-2.586 0-0.39 0.391-1.024 0.391-1.414 0s-0.391 
                   -1.024 0-1.414c1.392-1.392 4.023-1.392 5.414 0 0.391 0.39  
                   0.391 1.024 0 1.414-0.195 0.195-0.451 0.293-0.707 0.293z"> 
                    </path> 
                    <path d="M23 10.625c-0.256 0-0.512-0.098-0.707-0.293-0.604-0.604' 
                   -1.982-0.604-2.586 0-0.39 0.391-1.024 0.391-1.414 0s- 
                    0.391-1.024 0-1.414c1.392-1.392 4.023-1.392 5.414 0 0.391 
                    0.39 0.391 1.024 0 1.414-0.195 0.195-0.451 0.293-0.707 
                    0.293z"> 
                    </path> 
                </SvgIcon> 
            </div> 
        </div> 
    ); 
} 
  
export default App;