<a class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>

/*pulling control anchor outside the carousel body*/
.carousel-control.left {
    left: -15%;
}
.carousel-control.right, .carousel-control.left {
    -webkit-filter: none;
    filter: none;
    z-index: 5;
}
/*Default carousel code from Bootstrap.css*/
.carousel-control.left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 15%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/*pulling control anchor outside the carousel body*/
.carousel-control.right {
    right: -15%;
}
a.left.carousel-control > span.glyphicon.glyphicon-chevron-left {
    background: url("/assets/images/arrowLeft.svg") center center;
}
a.right.carousel-control > span.glyphicon.glyphicon-chevron-right {
    background: url("/assets/images/arrowRight.svg") center center;
}
/*Disabling default background font-icon*/
a.right.carousel-control > span.glyphicon.glyphicon-chevron-right::before, a.left.carousel-control > span.glyphicon.glyphicon-chevron-left::before {
    content: '' !important;
    display: block;
    overflow: visible;
    height: 30px;
    width: 30px;
}