Fix misaligned icons

CHANGELOG.md

@@ -5,6 +5,7 @@
 :wrench: **Fixes**
 
 - Fix alignment of copyright footer
+- Fix vertical alignment of many icons
 
 ## 8.1.0 - 11 January 2024
 

packages/components/action-link/_action-link.scss

@@ -62,14 +62,14 @@
     height: 36px;
     left: -3px;
     position: absolute;
-    top: -2px;
+    margin: auto;
+    top: 0;
+    bottom: 0;
     width: 36px;
 
     @include mq($until: tablet) {
       height: 24px;
       left: -2px;
-      margin-bottom: 0;
-      top: 2px;
       width: 24px;
     }
   }

packages/components/back-link/_back-link.scss

@@ -28,7 +28,9 @@
     height: 24px;
     left: -8px; /* 2 */
     position: absolute;
-    top: -1px; /* 3 */
+    margin: auto; /* 3 */
+    top: 0; /* 3 */
+    bottom: 0; /* 3 */
     width: 24px;
   }
 

packages/components/breadcrumb/_breadcrumb.scss

@@ -100,11 +100,14 @@
     background: url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__chevron-left' xmlns='http://www.w3.org/2000/svg' fill='%23005eb8' height='24' width='24' viewBox='8 0 24 24' aria-hidden='true'%3E%3Cpath d='M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z'%3E%3C/path%3E%3C/svg%3E")
       no-repeat;
     content: "";
+    background-position: left top;
     display: inline-block;
     height: 18px;
     left: 0;
     position: absolute;
-    top: 0;
+    margin: auto;
+    top: -2px;
+    bottom: 2px;
     width: 10px;
   }
 }

packages/components/checkboxes/_checkboxes.scss

@@ -61,7 +61,7 @@ $nhsuk-checkboxes-label-padding-left-right: 12px;
   height: $nhsuk-checkboxes-size;
   left: 0;
   position: absolute;
-  top: 0;
+  top: calc(0.75rem - 12px);
   width: $nhsuk-checkboxes-size;
 }
 
@@ -75,7 +75,7 @@ $nhsuk-checkboxes-label-padding-left-right: 12px;
   left: 10px;
   opacity: 0; /* 2 */
   position: absolute;
-  top: 13px;
+  top: calc(0.75rem + 1px);
   -ms-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);

packages/components/header/_header.scss

@@ -437,6 +437,11 @@
 }
 
 .nhsuk-icon__chevron-down {
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+
   .nhsuk-header__menu-toggle[aria-expanded="true"] & {
     transform: rotate(270deg);
   }

packages/components/pagination/_pagination.scss

@@ -7,6 +7,7 @@
  * 2. Append the word 'page' after next and
  *    previous on print stylesheets to make it easier
  *    to understand in print context.
+ * 3. Vertically align the icon with the text.
  */
 
 .nhsuk-pagination {
@@ -58,11 +59,10 @@
 
   .nhsuk-icon {
     position: absolute;
-    top: -2px;
+    top: calc(1rem - 18px); /* [3] */
 
     @include mq($media-type: print) {
       color: $color_nhsuk-black;
-      margin-top: 0;
     }
   }
 

packages/components/radios/_radios.scss

@@ -65,7 +65,7 @@ $nhsuk-radios-focus-width: $nhsuk-focus-width + 1px;
   height: $nhsuk-radios-size;
   left: 0;
   position: absolute;
-  top: 0;
+  top: calc(0.75rem - 12px);
   width: $nhsuk-radios-size;
 }
 
@@ -78,7 +78,7 @@ $nhsuk-radios-focus-width: $nhsuk-focus-width + 1px;
   left: 10px;
   opacity: 0;
   position: absolute;
-  top: 10px;
+  top: calc(0.75rem - 2px);
   width: 0;
 }
 

packages/core/styles/_lists.scss

@@ -14,6 +14,7 @@
  * 1. 'Random number' used to align ul and ol left with content.
  * 2. 'Random number' used to give sufficient spacing between text and icon.
  * 3. 'Random number' used to align icon and text.
+ * 4. Manually calculated regression to vertically align icon & text
  */
 
 %nhsuk-list {
@@ -74,7 +75,7 @@ ol {
 
   svg {
     left: -4px; /* [3] */
-    margin-top: -5px; /* [3] */
+    margin-top: calc(1rem - 21px); /* [4] */
     position: absolute;
   }
 }