fixed bug with material icons, and reusable icon component

src/views/components/CourseCatalogMain.tsx

@@ -6,6 +6,7 @@ import getCourseTableRows from '../lib/getCourseTableRows';
 import { SiteSupport } from '../lib/getSiteSupport';
 import { populateSearchInputs } from '../lib/populateSearchInputs';
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
+import Icon from './common/Icon/Icon';
 import Text from './common/Text/Text';
 import AutoLoad from './injected/AutoLoad/AutoLoad';
 import CoursePanel from './injected/CoursePanel/CoursePanel';
@@ -53,7 +54,10 @@ export default function CourseCatalogMain({ support }: Props) {
 
     return (
         <ExtensionRoot>
-            <TableHead>Plus</TableHead>
+            <TableHead>
+                Plus
+                <Icon name='add' />
+            </TableHead>
             {rows.map(row => {
                 if (!row.course) {
                     // TODO: handle the course section headers

src/views/components/common/Text/Text.tsx

@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
 import colors, { ISassColors } from 'src/views/styles/colors.module.scss';
-import fonts, { ISizes, IWeights } from 'src/views/styles/fonts.module.scss';
+import fonts, { Size, Weight } from 'src/views/styles/fonts.module.scss';
 import styles from './Text.module.scss';
 
 type Props = {
     color?: keyof ISassColors;
-    weight: keyof IWeights;
-    size: keyof ISizes;
+    weight: Weight;
+    size: Size;
     span?: boolean;
     className?: string;
     onClick?: () => void;
@@ -23,8 +23,8 @@ export default function Text(props: PropsWithChildren<Props>) {
 
     style.textAlign ??= props.align;
     style.color ??= colors?.[props.color ?? 'charcoal'];
-    style.fontSize ??= fonts?.[props.size ?? 'medium'];
-    style.fontWeight ??= fonts?.[props.weight ?? 'regular'];
+    style.fontSize ??= fonts?.[`${props.size ?? 'medium'}_size`];
+    style.fontWeight ??= fonts?.[`${props.weight ?? 'regular'}_weight`];
 
     if (props.span) {
         return (