Fix icon styles

css/_mixins.scss

@@ -50,6 +50,15 @@
   border-radius: 50%;
 }
 
+/**
+* Absolute position the element at the top left corner
+**/
+@mixin topLeft() {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
 @mixin absoluteAligning($sizeX, $sizeY) {
   top: 50%;
   left: 50%;

css/_videolayout_default.scss

@@ -306,37 +306,43 @@
         line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
     }
 
-    .connection.connection_empty
+    .connection {
+        position: relative;
+        margin: 0 auto;
+        width: 12px;
+        height: 8px;
+
+        &_empty
         {
+            @include topLeft();
+            max-width: 12px;
+            width: 12px;
             color: #8B8B8B;/*#FFFFFF*/
             overflow: hidden;
         }
 
-    .connection.connection_lost
+        &_lost
         {
+            @include topLeft();
+            max-width: 12px;
+            width: 12px;
             color: #8B8B8B;
             overflow: visible;
         }
 
-    .connection.connection_full
+        &_full
         {
+            @include topLeft();
+            max-width: 12px;
+            width: 12px;
             color: #FFFFFF;/*#15A1ED*/
             overflow: hidden;
         }
+    }
 
-    .connection,
     .icon-connection,
     .icon-connection-lost {
         font-size: 6pt;
-        line-height: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
-    }
-
-    .connection
-    {
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        border: 0px;
     }
 }
 

modules/UI/util/UIUtil.js

@@ -414,10 +414,14 @@ const TOOLTIP_POSITIONS = {
             indicatorSpan.className = 'indicator';
             indicatorSpan.id = indicatorId;
 
+            if(opts.content) {
                 indicatorSpan.innerHTML = opts.content;
+            }
 
+            if (opts.tooltip) {
                 this.setTooltip(indicatorSpan, opts.tooltip, "top");
                 APP.translation.translateElement($(indicatorSpan));
+            }
 
             document.getElementById(videoSpanId)
                 .querySelector('.videocontainer__toptoolbar')

modules/UI/videolayout/ConnectionIndicator.js

@@ -249,7 +249,6 @@ ConnectionIndicator.prototype.showMore = function () {
 
 function createIcon(classes, iconClass) {
     var icon = document.createElement("span");
-    icon.classList.add("indicatoricon");
     for(var i in classes) {
         icon.classList.add(classes[i]);
     }
@@ -267,6 +266,7 @@ ConnectionIndicator.prototype.create = function () {
         videoSpanId: this.videoContainer.videoSpanId,
         indicatorId
     });
+    element.classList.add('show');
     this.connectionIndicatorContainer = element;
 
     let popoverContent = (
@@ -289,13 +289,19 @@ ConnectionIndicator.prototype.create = function () {
         origShowFunc.call(this.popover);
     }.bind(this);
 
-    this.emptyIcon = this.connectionIndicatorContainer.appendChild(
-        createIcon(["connection", "connection_empty"], "icon-connection"));
-    this.fullIcon = this.connectionIndicatorContainer.appendChild(
-        createIcon(["connection", "connection_full"], "icon-connection"));
-    this.interruptedIndicator = this.connectionIndicatorContainer.appendChild(
-        createIcon(["connection", "connection_lost"],"icon-connection-lost"));
+    let connectionIconContainer = document.createElement('div');
+    connectionIconContainer.className = 'connection indicatoricon';
+
+
+    this.emptyIcon = connectionIconContainer.appendChild(
+        createIcon(["connection_empty"], "icon-connection"));
+    this.fullIcon = connectionIconContainer.appendChild(
+        createIcon(["connection_full"], "icon-connection"));
+    this.interruptedIndicator = connectionIconContainer.appendChild(
+        createIcon(["connection_lost"],"icon-connection-lost"));
+
     $(this.interruptedIndicator).hide();
+    this.connectionIndicatorContainer.appendChild(connectionIconContainer);
 };
 
 /**