Merge pull request #22802 from overleaf/mj-outline-icons

[web] Add some unfilled material symbols

GitOrigin-RevId: 2b5c477e6ff32f62ab40cacf666aeb98b311f126

services/web/frontend/fonts/material-symbols/material-symbols.css

@@ -10,6 +10,19 @@
   src: url('MaterialSymbolsRoundedSlice.woff2') format('woff2');
 }
 
+@font-face {
+  font-family: 'Material Symbols Rounded Unfilled Partial';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  /*
+    Generated by accessing 
+    https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=SORTED_SYMBOL_LIST&display=block
+    with a sorted list of symbols, and downloading the linked woff2 file.
+    */
+  src: url('MaterialSymbolsRoundedUnfilledPartialSlice.woff2') format('woff2');
+}
+
 .material-symbols {
   font-family: 'Material Symbols Rounded';
   font-weight: normal;
@@ -37,4 +50,13 @@
   &.rotate-180 {
     transform: rotate(180deg);
   }
+
+  &.unfilled {
+    font-family: 'Material Symbols Rounded Unfilled Partial';
+    font-variation-settings:
+      'FILL' 0,
+      'wght' 400,
+      'GRAD' 0,
+      'opsz' 20;
+  }
 }

services/web/frontend/js/shared/components/material-icon.tsx

@@ -2,23 +2,45 @@ import classNames from 'classnames'
 import React from 'react'
 import { bsVersion } from '@/features/utils/bootstrap-5'
 
-type IconProps = React.ComponentProps<'i'> & {
-  type: string
+// NOTE: When updating this list, make sure to update the bundled .woff2
+//       file as well. See details in material-symbols.css
+export type AvailableUnfilledIcon =
+  | 'description'
+  | 'forum'
+  | 'integration_instructions'
+  | 'rate_review'
+  | 'report'
+
+type BaseIconProps = React.ComponentProps<'i'> & {
   accessibilityLabel?: string
   modifier?: string
   size?: '2x'
 }
 
+type FilledIconProps = BaseIconProps & {
+  type: string
+  unfilled?: false
+}
+
+type UnfilledIconProps = BaseIconProps & {
+  type: AvailableUnfilledIcon
+  unfilled: true
+}
+
+type IconProps = FilledIconProps | UnfilledIconProps
+
 function MaterialIcon({
   type,
   className,
   accessibilityLabel,
   modifier,
   size,
+  unfilled,
   ...rest
 }: IconProps) {
   const iconClassName = classNames('material-symbols', className, modifier, {
     [`size-${size}`]: size,
+    unfilled,
   })
 
   return (