el-button custom icon in vue+element ui

accomplish

The icon attribute of the button customizes an icon name. This customized icon name will be added to the class of the i tag under the button by default. We only need to set the style of the i tag.

##3. Use a custom icon on the button

Complete code

  <div class="lookBtn">
            <el-button icon="el-icon-my-message" size="mini" type="primary" 
                   @click="checkAllTask">
                查看任务
           </el-button>
  </div>

style code

    ::v-deep .el-icon-my-message {
    
    
        background: url('../../assets/images/lookMsg.png') center no-repeat;
        width: 21px;
        height: 26px;
    }

    ::v-deep .el-icon-my-message:before {
    
    
        content: "替";
        font-size: 20px;
        visibility: hidden;
    }

    ::v-deep .el-icon-my-message {
    
    
        font-size: 16px;
    }

    ::v-deep .el-icon-my-message:before {
    
    
        content: "\e611";
    }