Refactor language picker using icon component

_includes/components/icon-list.html

@@ -8,7 +8,7 @@
   {% for item in include.items %}
     <li class="usa-icon-list__item">
       <div class="usa-icon-list__icon text-{{ include.icon_color }}">
-        {% include components/icon.html shape=include.icon_shape %}
+        {% include components/icon.html icon=include.icon_shape %}
       </div>
       <div class="usa-icon-list__content">
         {{ item |markdownify | remove: '<p>' | remove: '</p>' }}

_includes/components/icon.html

@@ -1,3 +1,17 @@
-<svg class="usa-icon" aria-hidden="true" role="img">
-  <use xlink:href="{{ site.baseurl }}/assets/img/sprite.svg#{{ include.shape }}"></use>
+{% comment %}
+include
+- icon
+- size
+{% endcomment %}
+
+{% assign class = 'usa-icon' %}
+{% if include.size > 1 %}
+  {% assign class = class | append: ' usa-icon--size-' | append: include.size %}
+{% endif %}
+{% if include.class %}
+  {% assign class = class | append: ' ' | append: include.class %}
+{% endif %}
+
+<svg class="{{ class }}" aria-hidden="true" role="img">
+  <use xlink:href="{{ site.baseurl }}/assets/img/sprite.svg#{{ include.icon }}"></use>
 </svg>

_includes/language_picker.html

@@ -4,10 +4,11 @@
       aria-controls="language-picker-{{ include.id }}"
       class="usa-accordion__button language-picker__label language-picker__label--button"
     >
-      <img src="{{ site.baseurl }}/assets/img/globe-blue.svg" alt="" width="12" height="12">
-      <span id="language-picker-{{ include.id }}-description">
+      {% include components/icon.html icon='language' %}
+      <span id="language-picker-{{ include.id }}-description" class="language-picker__label-text">
         {{ site.data.[page.lang].settings.global.language }}
       </span>
+      {% include components/icon.html icon='expand_more' size=3 class='language-picker__expander' %}
     </button>
   {% else %}
     <div class="language-picker__label language-picker__label--text">

_sass/components/_language-picker.scss

@@ -36,22 +36,30 @@
 .language-picker__label--button {
   @include typeset($theme-button-font-family, null, 1);
   @include u-radius($theme-button-border-radius);
-  background-position: right units(1.5) center;
-  background-position-y: calc(50% + 2px);
-  padding: units(1.5);
-  padding-right: units(3);
+  padding: units(1);
+  padding-left: units(1.5);
 
   &.usa-accordion__button[aria-expanded='false'],
   &.usa-accordion__button[aria-expanded='true'] {
-    background-size: 0.8125rem;
+    background-image: none;
   }
 
-  &.usa-accordion__button[aria-expanded='false'] {
-    background-image: url(../img/angle-arrow-down.svg);
+  .language-picker__label-text {
+    margin-left: units(1);
+    margin-right: units(0.5);
   }
+}
 
-  &.usa-accordion__button[aria-expanded='true'] {
-    background-image: url(../img/angle-arrow-up.svg);
+.language-picker__expander {
+  margin: -1px 0;
+  transition: transform $project-easing;
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+
+  .usa-accordion__button[aria-expanded='true'] & {
+    transform: rotate(-180deg);
   }
 }