[GHI #60] Use real token and fix default icon vertical alignment

src/components/icon.scss

@@ -15,7 +15,9 @@
   font-variation-settings: 'FILL' var(--mso-fill), 'wght' var(--mso-weight), 'GRAD' var(--mso-grade), 'opsz' var(--mso-optical-sizing);
 
   font-size: var(--rm-font-medium);
-  line-height: var(--rm-line-height-tight);
+
+  line-height: var(--rm-line-height-densest);
+  vertical-align: middle;
 }
 
 // Fill

src/stories/Icon.stories.js

@@ -0,0 +1,60 @@
+import { createIcon } from './Icon/Icon.js';
+import IconDocs from './Icon/Icon.mdx';
+
+export default {
+  title: 'Components/Icon',
+  argTypes: {
+    name: { control: 'text' },
+    filled: { control: 'boolean' },
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'large', 'x-large'],
+    },
+    weight: {
+      control: { type: 'select' },
+      options: ['light', 'normal', 'semi-bold', 'bold'],
+    },
+    emphasis: {
+      control: { type: 'select' },
+      options: ['low', 'normal', 'high'],
+    },
+  },
+  parameters: {
+    docs: {
+      page: IconDocs
+    },
+  },
+};
+
+const Template = ({ name, ...args }) => {
+  return createIcon({ name, ...args });
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'settings',
+};
+
+export const Filled = Template.bind({});
+Filled.args = {
+  name: 'settings',
+  filled: true,
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  name: 'settings',
+  size: 'large',
+};
+
+export const Bold = Template.bind({});
+Bold.args = {
+  name: 'settings',
+  weight: 'bold',
+};
+
+export const Emphasis = Template.bind({});
+Emphasis.args = {
+  name: 'settings',
+  emphasis: 'high',
+};

src/stories/Icon/Icon.js

@@ -0,0 +1,20 @@
+export const createIcon = ({
+  name,
+  filled = false,
+  size = 'medium',
+  weight = 'normal',
+  emphasis = 'normal',
+}) => {
+  const icon = document.createElement('span')
+  icon.innerText = name
+
+  icon.className = [
+    'material-symbols-outlined',
+    filled ? 'icon--filled' : 'icon--outlined',
+    `icon--${size}`,
+    `icon--weight-${weight}`,
+    `icon--${emphasis}-emphasis`,
+  ].filter(Boolean).join(' ');
+
+  return icon;
+};

src/stories/Icon/Icon.mdx

@@ -0,0 +1,55 @@
+import { Primary, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+
+# Icon
+
+Icon classes are built on top of [Google's Material Symbols Icon Font](https://fonts.google.com/icons). They provide a way to integrate iconography into your application in a flexible and customizable way.
+
+## Default
+
+To use an icon, put an element (usually a `span`) with the class of `.material-symbols-outlined` and inner text of whatever icon you which to use I.E. `settings` onto the page.
+```html
+<span class='material-symbols-outlined'>settings</span>
+```
+
+<Canvas withToolbar>
+  <Story id='components-icon--default' />
+</Canvas>
+
+## Filled
+
+`.icon--filled`, `.icon--outlined` (with outlined being the default) Provide a filled or outlined icon.
+
+<Canvas withToolbar>
+  <Story id='components-icon--filled' />
+</Canvas>
+
+## Size
+
+`.icon--medium`, `.icon--large`, `.icon--x-large` (with medium being the default) modify the size of any icon.
+
+<Canvas withToolbar>
+  <Story id='components-icon--large' />
+</Canvas>
+
+## Weight
+
+`.icon--weight-light`, `.icon--weight-normal`, `.icon--weight-semi-bold`, `.icon--weight-bold` (with normal being the default) modify the font weight of any icon.
+
+<Canvas withToolbar>
+  <Story id='components-icon--bold' />
+</Canvas>
+
+## Emphasis
+
+Emphasis acts similarly to weight, but changes the thickness of the icon strokes in subtle ways.
+
+`.icon--low-emphasis`, `.icon--normal-emphasis`, `.icon--high-emphasis` (with normal being the default) modify the emphasis of any icon.
+
+<Canvas withToolbar>
+  <Story id='components-icon--emphasis' />
+</Canvas>
+
+## Playground
+
+<Primary/>
+<ArgsTable of='.' story='^'/>