Customize iViewUI <Tag> component

Question

I'm using iViewUI for my Tag component, but I wanted to customize its size and where the "X" close button is.

I was able to change the width by simply adding a class to the Tag, but for some reason, even i'm trying to override also its children icon, is not responding to the change at all, is not applying it. Checked on browser, not adding it there either.

This is what I've done so far:

<Tag class="Badge-tag" color="warning" closable @on-close="removeTag">{{ badge }}</Tag>

Then on the less file I added the following:

.Badge-tag {
    width: 60px;
    position: relative;

    .ivu-icon.ivu-icon-ios-close {
        position: absolute;
        right: 2px;
        top: 4px;
    }
}

I had no luck at all. I don't know why is not setting it.

Answer 1

If you put above css as global css, I think it should work.

I create a demo on jsfiddle here, please check

If you use scoped css, you can try using deep selector

.Badge-tag {
    width: 60px;
    position: relative;

    /deep/ .ivu-icon.ivu-icon-ios-close {
        position: absolute;
        right: 2px;
        top: 4px;
    }
}