Creating icons stylesheet and updating mixins and variables.

assets/styles/_anchors.scss

@@ -1,5 +1,5 @@
 @use 'colors';
-@use 'typography';
+@use 'icons';
 
 // --------------------------------------------------
 //
@@ -43,11 +43,8 @@ a.underline__none {
 // *                 * //
 
 a.open-in-new:after {
-  @include typography.icon();
+  @include icons.icon($icon: 'open_in_new');
   & {
-    content: "\e89e"; // open_in_new
-    display: inline-block;
     margin-left: 0.25rem;
-    vertical-align: bottom;
   }
 }

assets/styles/_icons.scss

@@ -0,0 +1,53 @@
+@use './messages';
+@use 'sass:map';
+
+// --------------------------------------------------
+//
+// # Icons
+//   Styling for elements using Material Icons.
+//   https://fonts.google.com/icons
+//
+// ## Table of Contents
+//   1. Variables and Mixins
+//     1.1 Variables
+//     1.2 Mixins
+//
+// --------------------------------------------------
+
+
+
+
+
+// ******************************* //
+// *** 1. VARIABLES AND MIXINS *** //
+// ******************************* //
+
+// *               * //
+// * 1.1 VARIABLES * //
+// *               * //
+$icons: (
+  'dashboard': '\e871',
+  'info': '\e88e',
+  'open_in_new': '\e89e'
+);
+
+
+
+// *            * //
+// * 1.2 MIXINS * //
+// *            * //
+
+@mixin icon($fill: false, $icon) {
+  font-family: "Material Symbols Rounded";
+  @if $fill {
+    font-variation-settings: "FILL" 1;
+  }
+  @if $icon {
+    @include messages.missing-key($icons, $icon);
+    & {
+      content: map.get($icons, $icon);
+      display: inline-block;
+      vertical-align: bottom;
+    }
+  }
+}

assets/styles/_typography.scss

@@ -1,38 +1,23 @@
+@use './messages';
+@use 'sass:map';
+
 // --------------------------------------------------
 //
 // # Typography
 //   Styling for common text elements and classes.
 //
-// ## Table of Contents
-//   1. Mixins
-//   2. Headings
-//   3. Sizes
-//   4. Weight
-//   5. Material Icons
+//   1. Headings
+//   2. Sizes
+//   3. Weight
 //
 // --------------------------------------------------
 
 
 
 
 
-// ***************** //
-// *** 1. MIXINS *** //
-// ***************** //
-
-@mixin icon($fill: false) {
-  font-family: "Material Symbols Rounded";
-  @if $fill {
-    font-variation-settings: "FILL" 1;
-  }
-}
-
-
-
-
-
 // ******************* //
-// *** 2. HEADINGS *** //
+// *** 1. HEADINGS *** //
 // ******************* //
 
 h1 {
@@ -64,7 +49,7 @@ h6 {
 
 
 // **************** //
-// *** 3. SIZES *** //
+// *** 2. SIZES *** //
 // **************** //
 
 .text__large {
@@ -76,22 +61,9 @@ h6 {
 
 
 // ****************** //
-// *** 4. WEIGHTS *** //
+// *** 3. WEIGHTS *** //
 // ****************** //
 
 .strong {
   font-weight: 700;
 }
-
-
-
-
-
-// ************************* //
-// *** 5. MATERIAL ICONS *** //
-// ************************* //
-
-[class^="material-symbols-"] {
-  font-size: 1em;
-  vertical-align: middle;
-}

assets/styles/partials/header/_navigation.scss

@@ -1,6 +1,6 @@
 @use '../../colors';
 @use '../../media';
-@use '../../typography';
+@use '../../icons';
 @use '../../utilities';
 
 // --------------------------------------------------
@@ -82,14 +82,11 @@ $class: 'primary-navigation';
 
 .#{$class} a.#{$class}__everything {
   &:before {
-    @include typography.icon($fill: true);
+    @include icons.icon($fill: true, $icon: 'dashboard');
     & {
-      content: "\e871"; // dashboard
-      display: inline-block;
       font-size: 1.25rem;
       line-height: 1;
       margin-right: 0.25rem;
-      vertical-align: bottom;
     }
   }
   &:not([aria-current="page"]):before {

assets/styles/partials/header/_search.scss

@@ -1,5 +1,6 @@
 @use '../../colors';
 @use '../../media';
+@use '../../icons';
 @use '../../utilities';
 
 // --------------------------------------------------
@@ -138,11 +139,16 @@ $class: 'search-form';
 
 .#{$class}__tip {
   @include utilities.flex();
-  align-items: baseline;
+  align-items: start;
   display: none;
-  margin-top: 1rem;
+  margin-bottom: 0;
+  &:before {
+    @include icons.icon($icon: 'info');
+    & {
+      flex: none;
+    }
+  }
   .search-form__tip--content {
-    display: none;
-    margin: 0;
+    flex-grow: 1;
   }
 }

assets/styles/styles.scss

@@ -2,6 +2,7 @@
 @use 'base';
 @use 'utilities';
 @use 'typography';
+@use 'icons';
 @use 'anchors';
 @use 'forms';
 @use 'lists';