Use `Icon` in `FilterSelect`

src/sidebar/components/FilterSelect.js

-import { SvgIcon } from '@hypothesis/frontend-shared';
+import { Icon } from '@hypothesis/frontend-shared';
 
 import Menu from './Menu';
 import MenuItem from './MenuItem';
@@ -36,7 +36,9 @@ function FilterSelect({
 
   const menuLabel = (
     <span className="FilterSelect__menu-label">
-      {icon && <SvgIcon name={icon} className="FilterSelect__menu-icon" />}
+      {icon && (
+        <Icon name={icon} classes="u-icon--medium hyp-u-margin--right--3" />
+      )}
       {selected.display}
     </span>
   );

src/sidebar/components/test/FilterSelect-test.js

@@ -65,7 +65,7 @@ describe('FilterSelect', () => {
     const wrapper = createComponent({ icon: 'profile' });
 
     const label = mount(wrapper.find('Menu').props().label);
-    const icon = label.find('SvgIcon');
+    const icon = label.find('Icon');
 
     assert.isTrue(icon.exists());
     assert.equal(icon.props().name, 'profile');

src/styles/sidebar/components/FilterSelect.scss

@@ -24,9 +24,4 @@
     flex-shrink: 0;
     font-weight: bold;
   }
-
-  &__menu-icon {
-    @include utils.icon--medium;
-    margin-right: var.$layout-space--xsmall;
-  }
 }

src/styles/util.scss

@@ -49,6 +49,10 @@
   @include utils.icon--small;
 }
 
+.u-icon--medium {
+  @include utils.icon--medium;
+}
+
 .u-icon--large {
   @include utils.icon--large;
 }