Use sliced MaterialSymbolsRounded font (#16994)

GitOrigin-RevId: 51158acccc9967794b2192791961561d43274979

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

@@ -1,10 +1,13 @@
 @font-face {
   font-family: 'Material Symbols Rounded';
   font-style: normal;
-  font-weight: 100 700;
+  font-weight: 400;
   font-display: block;
-  src: url('material-symbols/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2')
+  /*
-    format('woff2');
+    Generated from MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2 with specific values:
+   'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20
+  */
+  src: url('material-symbols/MaterialSymbolsRoundedSlice.woff2') format('woff2');
 }
 
 .material-symbols {
@@ -12,6 +15,7 @@
   font-weight: normal;
   font-style: normal;
   font-size: 20px;
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
@@ -23,10 +27,6 @@
   -webkit-font-smoothing: antialiased;
 }
 
-.material-symbols.material-symbols-rounded {
-  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
-}
-
 .material-symbols-xl {
   font-size: 56px;
 }

services/web/frontend/js/features/group-management/components/members-table/managed-user-status.tsx

@@ -9,11 +9,7 @@ export default function ManagedUserStatus({ user }: ManagedUserStatusProps) {
   const { t } = useTranslation()
   const managedUserInvite = (
     <span className="security-state-invite-pending">
-      <MaterialIcon
+      <MaterialIcon type="schedule" accessibilityLabel={t('pending_invite')} />
-        type="schedule"
-        category="outlined"
-        accessibilityLabel={t('pending_invite')}
-      />
       &nbsp;
       {t('managed')}
     </span>

services/web/frontend/js/features/group-management/components/members-table/sso-status.tsx

@@ -23,11 +23,7 @@ function PendingInvite() {
   const { t } = useTranslation()
   return (
     <span className="security-state-invite-pending">
-      <MaterialIcon
+      <MaterialIcon type="schedule" accessibilityLabel={t('pending_invite')} />
-        type="schedule"
-        category="outlined"
-        accessibilityLabel={t('pending_invite')}
-      />
       &nbsp; {t('sso')}
     </span>
   )

services/web/frontend/js/features/history/components/change-list/all-history-list.tsx

@@ -164,7 +164,7 @@ function AllHistoryList() {
               // eslint-disable-next-line react/jsx-key
               <MaterialIcon
                 type="align_end"
-                className="material-symbols-rounded history-dropdown-icon-inverted"
+                className="history-dropdown-icon-inverted"
               />,
               <a href="https://www.overleaf.com/learn/latex/Using_the_History_feature" />, // eslint-disable-line jsx-a11y/anchor-has-content, react/jsx-key
             ]}

services/web/frontend/js/features/history/components/change-list/dropdown/compare-version-dropdown-content.tsx

@@ -42,7 +42,7 @@ function CompareVersionDropdownContentAllHistory({
         icon={
           <MaterialIcon
             type="align_start"
-            className="material-symbols-rounded history-dropdown-icon p-1"
+            className="history-dropdown-icon p-1"
           />
         }
       />
@@ -58,7 +58,7 @@ function CompareVersionDropdownContentAllHistory({
         icon={
           <MaterialIcon
             type="align_end"
-            className="material-symbols-rounded history-dropdown-icon p-1"
+            className="history-dropdown-icon p-1"
           />
         }
       />
@@ -102,7 +102,7 @@ function CompareVersionDropdownContentLabelsList({
         icon={
           <MaterialIcon
             type="align_start"
-            className="material-symbols-rounded history-dropdown-icon p-1"
+            className="history-dropdown-icon p-1"
           />
         }
       />
@@ -118,7 +118,7 @@ function CompareVersionDropdownContentLabelsList({
         icon={
           <MaterialIcon
             type="align_end"
-            className="material-symbols-rounded history-dropdown-icon p-1"
+            className="history-dropdown-icon p-1"
           />
         }
       />

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

@@ -1,27 +1,18 @@
 import classNames from 'classnames'
 import React from 'react'
 
-type IconOwnProps = {
+type IconProps = React.ComponentProps<'i'> & {
   type: string
-  category?: 'rounded' | 'outlined'
   accessibilityLabel?: string
 }
 
-type IconProps = IconOwnProps &
-  Omit<React.ComponentProps<'i'>, keyof IconOwnProps>
-
 function MaterialIcon({
   type,
-  category = 'rounded',
   className,
   accessibilityLabel,
   ...rest
 }: IconProps) {
-  const iconClassName = classNames(
+  const iconClassName = classNames('material-symbols', className)
-    'material-symbols',
-    `material-symbols-${category}`,
-    className
-  )
 
   return (
     <>

services/web/frontend/stylesheets/app/editor/history-react.less

@@ -380,7 +380,7 @@ history-root {
       background-color: @neutral-10;
     }
 
-    span.material-symbols-rounded {
+    span.material-symbols {
       vertical-align: middle;
       font-size: inherit;
     }

services/web/frontend/stylesheets/app/website-redesign.less

@@ -597,7 +597,7 @@
           }
         }
 
-        i.material-symbols-rounded {
+        i.material-symbols {
           vertical-align: middle;
           text-decoration: none;
         }
@@ -869,7 +869,7 @@
     font-family: 'DM Mono', monospace;
     font-weight: 500;
 
-    i.material-symbols-rounded {
+    i.material-symbols {
       vertical-align: middle;
       padding-bottom: 3px;
       font-size: 24px;