How to custom v-carousel delimiter icon - vue.js

Question

So I'm trying to use v-carousel for my project, but I wanna custom the delimiter icon from built-in
into something larger like this
but somehow I couldn't edit or add to change the delimiter into longer size because it's built-in. Any idea how?

Answer 1

In CSS do the following;
.v-carousel__controls__item.v-btn.v-btn--icon {
background-color: #ebece9; /* Background color of non-active ones */
height: 2px; /* Height you want */
width: 40px; /* Width you want */
border-radius: 0; /* Remove default border radius */
}
.v-carousel__controls__item.v-btn.v-btn--icon.v-btn--active {
background-color: #1f1f1f; /* Colour for active one */
}
.v-carousel__controls__item.v-btn.v-btn--icon:hover {
background-color: black; /* You might also want to customise the hover effect */
}
.v-btn__content .v-icon {
display: none; /* Removes the default icon */
}
Working demo