React MUI Material Icons

MUI or Material-UI ，它是一个React组件库。它使您能够构建自己的设计系统并更快地开发React应用程序。它基本上是由Google在2014年开发的设计语言。它使用了更多的设计和动画、网格系统，并提供了阴影和光效果。

Material UI图标 是一组预制的图标，可以从MUI组件系统中提取并嵌入到任何React应用程序中。MUI包含基于Google的Material Design准则的2000多个图标。MUI提供高质量的图标，非常灵活，您可以根据项目的需要更改颜色和调整图标的大小。

Material UI图标 有以下五种类型：

• Filled
• Outlined
• Rounded
• Two-tone
• Sharp

语法：

<AppleIcon/>

让我们通过示例来理解。

创建 React 应用程序：

步骤1： 创建一个新的 React 项目。转到你的终端并输入以下命令。

npx create-react-app appname

步骤2： 在安装MUI图标之前，我们需要安装另外两个包。使用npm安装Material UI和Material Icons包。

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

步骤3： 前往材质图标页面并搜索图标。

• 点击您想要的图标，您将会看到一个弹出窗口。

• 现在复制下面你看到的导入语句。

import AppleIcon from '@mui/icons-material/Apple';

• 将其粘贴到您想使用它的组件中。

示例1： 此示例演示了如何使用 MUI-Icons。将此代码添加到 App.js 文件中。

import * as React from "react"; 
import AppleIcon from "@mui/icons-material/Apple"; 
import AndroidIcon from "@mui/icons-material/Android"; 
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew"; 
import Stack from "@mui/material/Stack"; 
import Button from "@mui/material/Button"; 
import SearchIcon from "@mui/icons-material/Search"; 
  
function App() { 
    return ( 
        <> 
            <div style={{ textAlign: "center" }}> 
                <div style={{ color: "green",  
                     fontSize: "50px" }}> 
                  GeeksforGeeks 
                 </div> 
                <h3>Testing MUI-Icons</h3> 
                <Stack 
                    justifyContent="center"
                    alignItems="center"
                    spacing={5} 
                    direction="row"
                > 
                    <Button variant="outlined"> 
                        <AppleIcon /> 
                        Apple 
                    </Button> 
                    <Button variant="outlined"> 
                        <AndroidIcon /> 
                        Android 
                    </Button> 
                    <Button variant="outlined"> 
                        <PowerSettingsNewIcon /> 
                        Setting 
                    </Button> 
                    <Button variant="outlined"> 
                        <SearchIcon /> 
                        Search 
                    </Button> 
                </Stack> 
            </div> 
        </> 
    ); 
} 
  
export default App;

运行应用程序的步骤： 打开终端并输入以下命令。

npm start

输出：

示例2： 此示例演示了如何使用不同颜色的MUI-Icons。将以下代码添加到 App.js 文件中。

import * as React from "react"; 
import AppleIcon from "@mui/icons-material/Apple"; 
import AndroidIcon from "@mui/icons-material/Android"; 
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew"; 
import Stack from "@mui/material/Stack"; 
import Button from "@mui/material/Button"; 
import SearchIcon from "@mui/icons-material/Search"; 
  
function App() { 
    return ( 
        <> 
            <div style={{ textAlign: "center" }}> 
                <div style={{ color: "green",  
                     fontSize: "50px" }}> 
                  GeeksforGeeks 
                  </div> 
  
                <h3>Testing MUI-Icons</h3> 
                <Stack 
                    justifyContent="center"
                    alignItems="center"
                    spacing={5} 
                    direction="row"
                > 
                    <Button variant="outlined"> 
                        <AppleIcon style={{ color: "grey" }} /> 
                        Apple 
                    </Button> 
                    <Button variant="outlined"> 
                        <AndroidIcon style={{ color: "green" }} /> 
                        Android 
                    </Button> 
                    <Button variant="outlined"> 
                        <PowerSettingsNewIcon style={{ color: "black" }} /> 
                        Setting 
                    </Button> 
                    <Button variant="outlined"> 
                        <SearchIcon style={{ color: "gold" }} /> 
                        Search 
                    </Button> 
                </Stack> 
            </div> 
        </> 
    ); 
} 
  
export default App;

输出:

参考： https://mui.com/material-ui/material-icons/