style visited lessons with proper icon instead of emoji

assets/stylesheets/global/table-of-contents.css

@@ -20,10 +20,14 @@
     display: block;
     color: var(--color-text-grey);
 
+    &:hover,
     &.active {
-      position: relative;
       font-family: var(--font-medium);
       color: var(--color-text-default);
+    }
+
+    &.active {
+      position: relative;
 
       &:before,
       &:after {
@@ -37,27 +41,27 @@
         width: 3px;
         background: var(--color-course-active);
       }
-      &:after {
-        content: '👁';
-        left: calc(var(--toc-gap-left) * 2 * -1);
-      }
-    }
-
-    &:hover {
-      font-family: var(--font-medium);
-      color: var(--color-text-default);
     }
 
     &.visited {
       position:relative;
+
       &:before,
       &:after {
         position: absolute;
         top: 0;
       }
       &:after {
-        content: '👁';
+        content: '';
+        display: block;
+        width: 16px;
+        height: 16px;
+        top: 50%;
         left: calc(var(--toc-gap-left) * 2 * -1);
+        transform: translateY(-50%);
+
+        background: url('/images/icon-viewed.svg') no-repeat center center;
+        background-size: contain;
       }
     }
   }

public/images/icon-viewed.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 11">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M0-3h17v17H0z"/>
+    <path fill="#A9B9C0" fill-rule="nonzero" d="M8.5.188C4.958.188 1.934 2.39.708 5.5c1.226 3.11 4.25 5.313 7.792 5.313S15.066 8.61 16.292 5.5C15.066 2.39 12.042.187 8.5.187zm0 8.854A3.543 3.543 0 0 1 4.958 5.5 3.543 3.543 0 0 1 8.5 1.958 3.543 3.543 0 0 1 12.042 5.5 3.543 3.543 0 0 1 8.5 9.042zm0-5.667c-1.176 0-2.125.95-2.125 2.125 0 1.176.95 2.125 2.125 2.125 1.176 0 2.125-.95 2.125-2.125 0-1.176-.95-2.125-2.125-2.125z"/>
+  </g>
+</svg>

public/stylesheets/style.css

@@ -1192,12 +1192,16 @@ display: flex;
     color: #8091a5;
 }
 
-.table-of-contents__link.active {
-  position: relative;
+.table-of-contents__link:hover,
+    .table-of-contents__link.active {
   font-family: 'robotomedium', Helvetica, sans-serif;
   color: #2a3039;
 }
 
+.table-of-contents__link.active {
+  position: relative;
+}
+
 .table-of-contents__link.active:before,
       .table-of-contents__link.active:after {
   position: absolute;
@@ -1212,16 +1216,6 @@ display: flex;
   background: #536171;
 }
 
-.table-of-contents__link.active:after {
-  content: '👁';
-  left: -22px;
-}
-
-.table-of-contents__link:hover {
-  font-family: 'robotomedium', Helvetica, sans-serif;
-  color: #2a3039;
-}
-
 .table-of-contents__link.visited {
   position:relative;
 }
@@ -1233,8 +1227,16 @@ display: flex;
 }
 
 .table-of-contents__link.visited:after {
-  content: '👁';
+  content: '';
+  display: block;
+  width: 16px;
+  height: 16px;
+  top: 50%;
   left: -22px;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  background: url('/images/icon-viewed.svg') no-repeat center center;
+  background-size: contain;
 }
 
 .sidebar-menu {}