[Redesign] Add icons to tabs (#8763)

Addresses #8761

Author: loic-sharma

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -219,8 +219,13 @@
         margin-bottom: 18px;
       }
 
+      .ms-Icon {
+        top: 1px;
+      }
+
       img.icon {
         position: absolute;
+        top: 1px;
         left: -24px;
         width: 16px;
         height: 16px;
@@ -432,6 +437,11 @@
       font-size: 14px;
       font-family: @font-family-base;
       color: #323130;
+
+      .ms-Icon {
+        position: relative;
+        top: 2px;
+      }
     }
   }
 

src/Bootstrap/less/theme/page-display-package-v2.less

@@ -487,28 +487,43 @@
                 @if (!Model.Deleted)
                 {
                     <li role="presentation" class="active" id="show-readme-container">
-                        <a href="#readme-tab" aria-controls="readme-tab" role="tab" data-toggle="tab" id="readme-body-tab" class="body-tab">README</a>
+                        <a href="#readme-tab" aria-controls="readme-tab" role="tab" data-toggle="tab" id="readme-body-tab" class="body-tab">
+                            <i class="ms-Icon ms-Icon--Dictionary" aria-hidden="true"></i>
+                            README
+                        </a>
                     </li>
                     <li role="presentation">
-                        <a href="#dependencies-tab" aria-controls="dependencies-tab" role="tab" data-toggle="tab" id="dependencies-body-tab" class="body-tab">Dependencies</a>
+                        <a href="#dependencies-tab" aria-controls="dependencies-tab" role="tab" data-toggle="tab" id="dependencies-body-tab" class="body-tab">
+                            <i class="ms-Icon ms-Icon--Packages" aria-hidden="true"></i>
+                            Dependencies
+                        </a>
                     </li>
                 }
 
                 @if (!Model.IsDotnetToolPackageType && (Model.IsGitHubUsageEnabled || Model.IsPackageDependentsEnabled))
                 {
                     <li role="presentation">
-                        <a href="#usedby-tab" aria-controls="usedby-tab" role="tab" data-toggle="tab" id="usedby-body-tab" class="body-tab">Used By</a>
+                        <a href="#usedby-tab" aria-controls="usedby-tab" role="tab" data-toggle="tab" id="usedby-body-tab" class="body-tab">
+                            <i class="ms-Icon ms-Icon--BranchFork2" aria-hidden="true"></i>
+                            Used By
+                        </a>
                     </li>
                 }
 
                 <li role="presentation">
-                    <a href="#versions-tab" aria-controls="versions-tab" role="tab" data-toggle="tab" id="versions-body-tab" class="body-tab">Versions</a>
+                    <a href="#versions-tab" aria-controls="versions-tab" role="tab" data-toggle="tab" id="versions-body-tab" class="body-tab">
+                        <i class="ms-Icon ms-Icon--Stopwatch" aria-hidden="true"></i>
+                        Versions
+                    </a>
                 </li>
 
                 @if (!String.IsNullOrWhiteSpace(Model.ReleaseNotes))
                 {
                     <li role="presentation">
-                        <a href="#releasenotes-tab" aria-controls="releasenotes-tab" role="tab" data-toggle="tab" id="release-body-tab" class="body-tab">Release Notes</a>
+                        <a href="#releasenotes-tab" aria-controls="releasenotes-tab" role="tab" data-toggle="tab" id="release-body-tab" class="body-tab">
+                            <i class="ms-Icon ms-Icon--ReadingMode" aria-hidden="true"></i>
+                            Release Notes
+                        </a>
                     </li>
                 }
             </ul>