From 7c5a63153b40f39cfb07547848656c57a9a9cb2d Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Thu, 16 Jan 2025 10:00:06 +0000
Subject: [PATCH] Merge pull request #22802 from overleaf/mj-outline-icons

[web] Add some unfilled material symbols

GitOrigin-RevId: 2b5c477e6ff32f62ab40cacf666aeb98b311f126
---
 ...alSymbolsRoundedUnfilledPartialSlice.woff2 | Bin 0 -> 2336 bytes
 .../material-symbols/material-symbols.css     |  22 +++++++++++++++
 .../js/shared/components/material-icon.tsx    |  26 ++++++++++++++++--
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2

diff --git a/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 b/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..6eba080dd6f7f346348e385410b131ee6b8cbf63
GIT binary patch
literal 2336
zcmV+*3E%d2Pew8T0RR9100|%f4gdfE01%7-00_na0RR9100000000000000000000
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
G0001vc~$@b

literal 0
HcmV?d00001

diff --git a/services/web/frontend/fonts/material-symbols/material-symbols.css b/services/web/frontend/fonts/material-symbols/material-symbols.css
index a6a8e093a9..7fda97b6ef 100644
--- a/services/web/frontend/fonts/material-symbols/material-symbols.css
+++ b/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;
+  }
 }
diff --git a/services/web/frontend/js/shared/components/material-icon.tsx b/services/web/frontend/js/shared/components/material-icon.tsx
index 6ef71a1d4b..19305b7e60 100644
--- a/services/web/frontend/js/shared/components/material-icon.tsx
+++ b/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 (