安装 Element Plus
$ npm install @element-plus/icons
在main.js 引入
import * as ElIcon from '@element-plus/icons-vue'Object.keys(ElIcon).forEach((key) => {app.component(key, ElIcon[key])
})方式一：通过 icon="el-icon-plus" 使用
<!-- 方式一 -->
<el-button type="success" icon="el-icon-plus" >新建规则
</el-button>
方式二：通过 <el-icon> 使用
<!-- 方式二 -->
<el-button type="success"><el-icon style="vertical-align: middle"><Plus /></el-icon><span style="vertical-align: middle">新建规则</span>
</el-button>方式三：通过 <IconName> 直接使用 SVG 图标
<!-- 方式三 -->
<el-button type="success"><Plus style="width: 1em; height: 1em; margin-right: 8px"/><span style="vertical-align: middle">新建规则</span>
</el-button>附：Element Plus Icon图标 名称
System
- Plus
- Minus
- CirclePlus
- Search
- Female
- Male
- Aim
- House
- FullScreen
- Loading
- Link
- Service
- Pointer
- Star
- Notification
- Connection
- ChatDotRound
- Setting
- Clock
- Position
- Discount
- Odometer
- ChatSquare
- ChatRound
- ChatLineRound
- ChatLineSquare
- ChatDotSquare
- View
- Hide
- Unlock
- Lock
- RefreshRight
- RefreshLeft
- Refresh
- Bell
- MuteNotification
- User
- Check
- CircleCheck
- Warning
- CircleClose
- Close
- PieChart
- More
- Compass
- Filter
- Switch
- Select
- SemiSelect
- CloseBold
- EditPen
- Edit
- Message
- MessageBox
- TurnOff
- Finished
- Delete
- Crop
- SwitchButton
- Operation
- Open
- Remove
- ZoomOut
- ZoomIn
- InfoFilled
- CircleCheckFilled
- SuccessFilled
- WarningFilled
- CircleCloseFilled
- QuestionFilled
- WarnTriangleFilled
- UserFilled
- MoreFilled
- Tools
- HomeFilled
- Menu
- UploadFilled
- Avatar
- HelpFilled
- Share
- StarFilled
- Comment
- Histogram
- Grid
- Promotion
- DeleteFilled
- RemoveFilled
- CirclePlusFilled
Arrow
- ArrowLeft
- ArrowUp
- ArrowRight
- ArrowDown
- ArrowLeftBold
- ArrowUpBold
- ArrowRightBold
- ArrowDownBold
- DArrowRight
- DArrowLeft
- Download
- Upload
- Top
- Bottom
- Back
- Right
- TopRight
- TopLeft
- BottomRight
- BottomLeft
- Sort
- SortUp
- SortDown
- Rank
- CaretLeft
- CaretTop
- CaretRight
- CaretBottom
- DCaret
- Expand
- Fold
Document
- DocumentAdd
- Document
- Notebook
- Tickets
- Memo
- Collection
- Postcard
- ScaleToOriginal
- SetUp
- DocumentDelete
- DocumentChecked
- DataBoard
- DataAnalysis
- CopyDocument
- FolderChecked
- Files
- Folder
- FolderDelete
- FolderRemove
- FolderOpened
- DocumentCopy
- DocumentRemove
- FolderAdd
- FirstAidKit
- Reading
- DataLine
- Management
- Checked
- Ticket
- Failed
- TrendCharts
- List
Media
- Microphone
- Mute
- Mic
- VideoPause
- VideoCamera
- VideoPlay
- Headset
- Monitor
- Film
- Camera
- Picture
- PictureRounded
- Iphone
- Cellphone
- VideoCameraFilled
- PictureFilled
- Platform
- CameraFilled
- BellFilled
Traffic
- Location
- LocationInformation
- DeleteLocation
- Coordinate
- Bicycle
- OfficeBuilding
- School
- Guide
- AddLocation
- MapLocation
- Place
- LocationFilled
- Van
Food
- Watermelon
- Pear
- NoSmoking
- Smoking
- Mug
- GobletSquareFull
- GobletFull
- KnifeFork
- Sugar
- Bowl
- MilkTea
- Lollipop
- Coffee
- Chicken
- Dish
- IceTea
- ColdDrink
- CoffeeCup
- DishDot
- IceDrink
- IceCream
- Dessert
- IceCreamSquare
- ForkSpoon
- IceCreamRound
- Food
- HotWater
- Grape
- Fries
- Apple
- Burger
- Goblet
- GobletSquare
- Orange
- Cherry
Items
- Printer
- Calendar
- CreditCard
- Box
- Money
- Refrigerator
- Cpu
- Football
- Brush
- Suitcase
- SuitcaseLine
- Umbrella
- AlarmClock
- Medal
- GoldMedal
- Present
- Mouse
- Watch
- QuartzWatch
- Magnet
- Help
- Soccer
- ToiletPaper
- ReadingLamp
- Paperclip
- MagicStick
- Basketball
- Baseball
- Coin
- Goods
- Sell
- SoldOut
- Key
- ShoppingCart
- ShoppingCartFull
- ShoppingTrolley
- Phone
- Scissor
- Handbag
- ShoppingBag
- Trophy
- TrophyBase
- Stopwatch
- Timer
- CollectionTag
- TakeawayBox
- PriceTag
- Wallet
- Opportunity
- PhoneFilled
- WalletFilled
- GoodsFilled
- Flag
- BrushFilled
- Briefcase
- Stamp
Weather
- Sunrise
- Sunny
- Ship
- MostlyCloudy
- PartlyCloudy
- Sunset
- Drizzling
- Pouring
- Cloudy
- Moon
- MoonNight
- Lightning
Other
- ChromeFilled
- Eleme
- ElemeFilled
- ElementPlus
- Shop
- SwitchFilled
- WindPower
