Element的MessageBox 彈框如何自定義圖標

需求：修改彈框的小圖標，如下是element自帶

首先，複製一段element的官方代碼作爲演示

<template>
  <el-button type="text" @click="open">點擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作將永久刪除該文件, 是否繼續?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });          
        });
      }
    }
  }
</script>

情況一：element中的Icon圖標中有你想要的，那直接添加一個iconClass選項



如果想要修改圖標爲其他顏色，也很簡單：

<style>
.el-icon-phone-outline{
  color: red;
}
</style>

效果如下：

情況二：需要使用UI提供的svg小圖標，例如我的svg圖片如下


圖片到手了就可以接下來的操作：
步驟一：登陸阿里媽媽圖標庫網站👉http://www.iconfont.cn
步驟二：註冊賬號並創建‘我的項目’


步驟三：創建好項目後，將你準備好的svg圖片上傳，上傳好之後，項目中就會顯示圖片

步驟四：下載項目文件，解壓，找到iconfont.css文件


步驟五：將iconfont.css文件放置你開發的項目中（public文件夾下），然後index.html引入資源

<link rel="stylesheet" href="./iconfont/iconfont.css">

步驟六：打開iconfont.css可以看到兩個類名，直接複製使用就可以了

修改好後效果如下，顏色修改同情況一：