Can't grab and drag SPAN handler

[Lisa]

We have a kendo sortable listview object, and the definition and styles for the handler are given below.  The handler span contains a span which renders as the drag icon.  It looks fine, but the icon and row cannot can not be dragged.  If the inner span is replaced by text or a non-breaking space, it works fine.  

The icon we want to use is in a SVG sprite.  I tried styling the handler itself as the icon but it isn't possible to center the icon in the handler that way.

Is it possible to do what we are attempting to do?  Thank you!


Handler HTML:

<span class="handler">
  <span class="icon icon-drag icon-drag-dims"></span>
</span>

Styles:

.handler {
  border-right: 1px solid #eaeaea;
  width: 40px;
  height: 44px;
  display: inline-block;
  text-align: center;
}

.handler .icon {
  vertical-align: middle;
}

.icon {
    display: inline-block;
}

.icon-drag {
   background-position: 0 -391px;
   background-repeat: no-repeat;
   background-image: url(../../images/sprites/icons.svg);
}

.icon-drag-dims {
   width: 21px;
   height: 21px;
}

[Lisa]

Never mind.  Our HTML/CSS designer was able to solve it through CSS.