.leaflet-control-boating .icon {
  display: block;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
.leaflet-control-boating .icon.idle {
  background-image: url(../assets/icon.svg);
}
.leaflet-control-boating .icon.following {
  background-image: url(../assets/icon.following.svg);
}
.leaflet-control-boating .icon.locating {
  background-image: url(../assets/icon.locating.svg);
}
.leaflet-control-boating .icon.requesting {
  background-image: url(../assets/icon.requesting.svg);
  animation: boating-icon-spin 2s linear infinite;
}
@keyframes boating-icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.leaflet-control-boating::after { /* preloading icons */
  position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1;
  content: url(../assets/icon.svg) url(../assets/icon.locating.svg) url(../assets/icon.following.svg) url(../assets/icon.requesting.svg);
}