Icon styles

scss/atat.scss

@@ -3,6 +3,7 @@
 
 @import 'core/base';
 @import 'core/grid';
+@import 'core/util';
 
 @import 'elements/typography';
 @import 'elements/inputs';
@@ -10,6 +11,7 @@
 @import 'elements/panels';
 @import 'elements/block_lists';
 @import 'elements/tables';
+@import 'elements/icons';
 
 @import 'components/site_action';
 @import 'components/empty_state';

scss/core/_util.scss

@@ -0,0 +1,3 @@
+.nowrap {
+  white-space: nowrap;
+}

scss/core/_variables.scss

@@ -3,10 +3,9 @@
  * ===================================================
  */
 
-$gap:             .8rem; // 8px at 10px $em-base
+$gap:               .8rem; // 8px at 10px $em-base
-$topbar-height:   4.8rem;
+$topbar-height:     4.8rem;
-
+$icon-size-small:   2.4rem;
-
 
 /*
  * USWDS Variables

scss/elements/_icons.scss

@@ -0,0 +1,28 @@
+@mixin icon {
+  display: inline-block;
+  vertical-align: bottom;
+
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@mixin icon-size($size) {
+  $icon-size: $size * .1rem;
+  width: $icon-size;
+  height: $icon-size;
+  margin: $icon-size / 4;
+}
+
+@mixin icon-style-default {
+  > svg * {
+    fill: $color-black;
+  }
+}
+
+.icon {
+  @include icon;
+  @include icon-size(16);
+  @include icon-style-default;
+}