Add file download icon to de-risking guide primary nav (#728)

Implement and document icons for download links in primary navigation.
Currently this is used only in the de-risking guide.

_includes/menu.html

@@ -32,8 +32,11 @@
             class="usa-nav__link{% if basedir == linkdir %} usa-current{% endif %}"
             href="{{ nav_item.url | url }}"
             {% if nav_item.download %}download{% endif %}
-            ><span>{{ nav_item.name | escape }}</span></a
-          >
+            ><span>{{ nav_item.name | escape }}</span>
+            {% if nav_item.download %}
+              <span class="download-icon">{% uswds_icon "file_download" %}</span>
+            {% endif %}
+          </a>
         </li>
         {% else %} {% assign nav_id = 'primary-nav-' | append: forloop.index %}
         <li class="usa-nav__primary-item">

assets/_common/styles/custom-styles.scss

@@ -220,3 +220,14 @@ h2.heading-md {
     vertical-align: middle;
   }
 }
+
+/* Primary navigation icons */
+.usa-nav__primary-item .usa-nav__link .download-icon {
+  padding-left: 2px;
+
+  .usa-icon {
+    min-height: 1rem;
+    min-width: 1rem;
+    vertical-align: middle;
+  }
+}

assets/_common/styles/overrides/extended-header.scss

@@ -17,4 +17,10 @@
     border-style: solid;
     border-top: 0;
   }
+
+  /* Position the file download icon in the primary nav */
+  .usa-nav__primary-item .usa-nav__link span.download-icon .usa-icon {
+    display: inline-block;
+    margin-top: 1px;
+  }
 }

docs/development.md

@@ -133,7 +133,7 @@ agile:
     url: /agile/
 ```
 
-You can add the `download` attribute to a primary navigation link and specify a file name by setting the optional `download` key to `true`.
+If you set the optional `download` key to `true` for a navigation item, it will add the `download` attribute to the link and display a file download icon next to its name.
 
 _Example:_
 ```