vue iview修改树前面的icon

iview官网的样式是这样的

我们要修改成的样式为

方式一、background:是引用自己找的图片

<style scoped>
    .ivu-tree>>>.ivu-icon {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    .ivu-tree>>>.ivu-icon-ios-arrow-forward:before {
        content: "";
        background-size: cover;
        background:url('~@/../static/images/add.png') no-repeat 0 2px;*/
        width: 20px;
        height: 20px;
        display: block;
        font-size: 15px;
        margin-left: -3px;
        margin-top: 4px;
    }
    .ivu-tree>>>.ivu-tree-arrow-open .ivu-icon-ios-arrow-forward:before { 
        content: "";
        display: block;
        background:url('~@/../static/images/plus.png') no-repeat 0 2px;*/
        background-size: cover;
        width: 20px;
        height: 20px;
        font-size: 15px;
        margin-left: -3px;
        margin-top: 4px;
    }

</style>

方式二、引用iview里的icon

<style scoped>
    .ivu-tree>>>.ivu-icon {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    .ivu-tree>>>.ivu-icon-ios-arrow-forward:before {
        content: "\F100";
        background-size: cover;
        width: 20px;
        height: 20px;
        display: block;
        font-size: 15px;
        margin-left: -3px;
        margin-top: 4px;
    }
    .ivu-tree>>>.ivu-tree-arrow-open .ivu-icon-ios-arrow-forward:before { 
        content: "\F290";
        display: block;
        background-size: cover;
        width: 20px;
        height: 20px;
        font-size: 15px;
        margin-left: -3px;
        margin-top: 4px;
    }

</style>