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;
|
Output:
Reference: https://mui.com/material-ui/api/svg-icon/