Material-UI 添加图标 - Javascript

简介

Material-UI 是一个基于 React 的 UI 组件库，提供了许多常用的 UI 组件以及样式，并且支持自定义主题。

在 Material-UI 中添加图标非常方便，只需要引入相应的图标组件即可。Material-UI 内置了一些常用的图标，如Add、Delete、Search 等，同时还可以使用 Material Design 提供的所有图标。可以在 Material Design 的官网上查找需要的图标。

步骤

1. 首先需要安装 @material-ui/icons，这是 Material-UI 提供的图标组件库。可以使用 npm 或者 yarn 进行安装。

   # 使用 npm 安装
   npm install @material-ui/icons
   
   # 使用 yarn 安装
   yarn add @material-ui/icons
   

2. 在需要使用图标的组件中，引入对应的图标组件。

   import AddIcon from '@material-ui/icons/Add';
   
   function MyComponent() {
     return (
       <div>
         <AddIcon />
         添加
       </div>
     );
   }
   

3. 如果需要修改图标的颜色、大小等属性，可以使用 style 属性进行修改。

   function MyComponent() {
     return (
       <div>
         <AddIcon style={{ color: 'red', fontSize: 24 }} />
         添加
       </div>
     );
   }
   

总结

使用 Material-UI 添加图标非常方便，只需要引入对应的图标组件即可。同时，Material-UI 还支持自定义主题，可以根据自己的需求来进行定制。