fixed bug with material icons, and reusable icon component

src/views/styles/fonts.module.scss

@@ -8,40 +8,40 @@
     }
 }
 
-/* fallback */
 @font-face {
     font-family: 'Material Icons Round';
     font-style: normal;
-    font-weight: 400;
     font-display: block;
-    src: url('moz-extension://__MSG_@@extension_id__/fonts/material-icons.woff2') format('woff2');
+    font-weight: 400;
+    src: url('chrome-extension://__MSG_@@extension_id__/fonts/material-icons.woff2') format('woff2');
 }
 
-$light: 300;
-$regular: 400;
-$medium: 500;
-$semi_bold: 600;
-$bold: 700;
-$black: 900;
+$light_weight: 300;
+$regular_weight: 400;
+$normal_weight: 500;
+$semi_bold_weight: 600;
+$bold_weight: 700;
+$black_weight: 900;
 
-$x_small: 8px;
-$small: 12px;
-$medium: 16px;
-$large: 24px;
-$x_large: 32px;
-$xx_large: 48px;
+$x_small_size: 8px;
+$small_size: 12px;
+$medium_size: 16px;
+$large_size: 24px;
+$x_large_size: 32px;
+$xx_large_size: 48px;
 
 :export {
-    light: $light;
-    regular: $regular;
-    medium: $medium;
-    semi_bold: $semi_bold;
-    bold: $bold;
-    black: $black;
-    x_small: $x_small;
-    small: $small;
-    medium: $medium;
-    large: $large;
-    x_large: $x_large;
-    xx_large: $xx_large;
+    light_weight: $light_weight;
+    regular_weight: $regular_weight;
+    normal_weight: $normal_weight;
+    semi_bold_weight: $semi_bold_weight;
+    bold_weight: $bold_weight;
+    black_weight: $black_weight;
+
+    x_small_size: $x_small_size;
+    small_size: $small_size;
+    medium_size: $medium_size;
+    large_size: $large_size;
+    x_large_size: $x_large_size;
+    xx_large_size: $xx_large_size;
 }

src/views/styles/fonts.module.scss.d.ts

@@ -1,21 +1,33 @@
+/**
+ * the type for all the weight scss variables exported from fonts.module.scss
+ */
 export interface IWeights {
-    light: number;
-    regular: number;
-    medium: number;
-    bold: number;
-    semi_bold: number;
-    black: number;
+    light_weight: number;
+    regular_weight: number;
+    normal_weight: number;
+    bold_weight: number;
+    semi_bold_weight: number;
+    black_weight: number;
 }
 
+/**
+ * the type for all the size scss variables exported from fonts.module.scss
+ */
 export interface ISizes {
-    x_small: number;
-    small: number;
-    medium: number;
-    large: number;
-    x_large: number;
-    xx_large: number;
+    x_small_size: number;
+    small_size: number;
+    medium_size: number;
+    large_size: number;
+    x_large_size: number;
+    xx_large_size: number;
 }
 
+/** A utility type that removes the _weight postfix from the variable names for weights */
+export type Weight = keyof IWeights extends `${infer U}_weight` ? U : never;
+
+/** A utility type that removes the _size postfix from the variable names for sizes */
+export type Size = keyof ISizes extends `${infer U}_size` ? U : never;
+
 /**
  * This is a file that we need to create to tell typescript what the shape of the css modules is
  * when we import them into ts/tsx files