From 9b3b2df444dba698ad157da87a4d9b33466a87c0 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Fri, 20 Jun 2025 11:31:28 +0100
Subject: [PATCH] Merge pull request #26456 from
 overleaf/td-limit-browser-translate-non-react-icons

Prevent browser translation of icons in Pug pages

GitOrigin-RevId: 97e4d3ba70a4c95bed2c9f52e66038911625613d
---
 .../web/app/views/_mixins/formMessages.pug    | 10 +++---
 services/web/app/views/_mixins/links.pug      |  4 ++-
 .../web/app/views/_mixins/material_symbol.pug | 11 ++++++
 .../web/app/views/_mixins/notification.pug    | 11 +++---
 .../app/views/_mixins/previous_page_link.pug  |  4 ++-
 .../layout/language-picker-bootstrap-5.pug    |  6 ++--
 .../views/subscriptions/plans/_faq_new.pug    |  3 +-
 .../subscriptions/plans/_plans_faq_tabs.pug   | 35 ++++++++++---------
 services/web/app/views/user/passwordReset.pug |  3 +-
 services/web/app/views/user/restricted.pug    |  3 +-
 services/web/config/settings.defaults.js      |  2 +-
 .../js/features/contact-form/search.js        |  3 +-
 .../js/features/form-helpers/create-icon.js   |  1 +
 .../visual-widgets/table-rendering-error.ts   |  1 +
 .../stylesheets/app/editor/history-react.less |  2 +-
 .../stylesheets/app/website-redesign.less     |  8 ++---
 .../bootstrap-5/pages/homepage.scss           |  2 +-
 .../bootstrap-5/pages/website-redesign.scss   |  4 +--
 .../user-activate/app/views/user/activate.pug |  5 +--
 19 files changed, 73 insertions(+), 45 deletions(-)
 create mode 100644 services/web/app/views/_mixins/material_symbol.pug

diff --git a/services/web/app/views/_mixins/formMessages.pug b/services/web/app/views/_mixins/formMessages.pug
index 9a76d118c7..2fab7e40d8 100644
--- a/services/web/app/views/_mixins/formMessages.pug
+++ b/services/web/app/views/_mixins/formMessages.pug
@@ -1,3 +1,5 @@
+include ./material_symbol
+
 mixin formMessages()
 	div(
 		data-ol-form-messages='',
@@ -48,7 +50,7 @@ mixin customFormMessageNewStyle(key, kind, extraClass = 'mb-3')
 			aria-live="polite"
 		)
 			div.notification-icon
-				span.material-symbols(aria-hidden="true") check_circle
+				+material-symbol("check_circle")
 			div.notification-content.text-left
 				block
 	else if kind === 'danger'
@@ -60,7 +62,7 @@ mixin customFormMessageNewStyle(key, kind, extraClass = 'mb-3')
 			aria-live="polite"
 		)
 			div.notification-icon
-				span.material-symbols(aria-hidden="true") error
+				+material-symbol("error")
 			div.notification-content.text-left
 				block
 	else
@@ -72,7 +74,7 @@ mixin customFormMessageNewStyle(key, kind, extraClass = 'mb-3')
 			aria-live="polite"
 		)
 			div.notification-icon
-				span.material-symbols(aria-hidden="true") warning
+				+material-symbol("warning")
 			div.notification-content.text-left
 				block
 
@@ -91,6 +93,6 @@ mixin customValidationMessageNewStyle(key)
 			data-ol-custom-form-message=key
 		)
 		div.notification-icon
-			span.material-symbols(aria-hidden="true") error
+			+material-symbol("error")
 		div.notification-content.text-left.small
 			block
diff --git a/services/web/app/views/_mixins/links.pug b/services/web/app/views/_mixins/links.pug
index 9036f86e17..566c90ee50 100644
--- a/services/web/app/views/_mixins/links.pug
+++ b/services/web/app/views/_mixins/links.pug
@@ -1,3 +1,5 @@
+include ./material_symbol
+
 mixin linkAdvisors(linkText, linkClass, track)
 	//- To Do: verify path
 	- var gaCategory = track && track.category ? track.category : 'All'
@@ -120,4 +122,4 @@ mixin linkUniversities(linkText, linkClass)
 mixin linkWithArrow({text, href, eventTracking, eventSegmentation, eventTrackingTrigger})
 	a.link-with-arrow(href=href event-tracking=eventTracking event-segmentation=eventSegmentation, event-tracking-trigger=eventTrackingTrigger event-tracking-mb)
 		| #{text}
-		i.material-symbols(aria-hidden="true") arrow_right_alt
+		+material-symbol("arrow_right_alt")
diff --git a/services/web/app/views/_mixins/material_symbol.pug b/services/web/app/views/_mixins/material_symbol.pug
new file mode 100644
index 0000000000..1e97425faf
--- /dev/null
+++ b/services/web/app/views/_mixins/material_symbol.pug
@@ -0,0 +1,11 @@
+mixin material-symbol(icon, extraClass = null)
+	- extraClass = extraClass ? ' ' + extraClass : ''
+	span(aria-hidden="true", translate="no", class="material-symbols" + extraClass)&attributes(attributes) #{icon}
+	
+mixin material-symbol-outlined(icon, extraClass = null)
+	- extraClass = extraClass ? ' ' + extraClass : ''
+	+material-symbol(icon, 'material-symbols-outlined' + extraClass)&attributes(attributes)
+
+mixin material-symbol-rounded(icon, extraClass = null)
+	- extraClass = extraClass ? ' ' + extraClass : ''
+	+material-symbol(icon, 'material-symbols-rounded' + extraClass)&attributes(attributes)
diff --git a/services/web/app/views/_mixins/notification.pug b/services/web/app/views/_mixins/notification.pug
index 3e336affdf..fb0db79630 100644
--- a/services/web/app/views/_mixins/notification.pug
+++ b/services/web/app/views/_mixins/notification.pug
@@ -1,14 +1,15 @@
 //- to be kept in sync with frontend/js/shared/components/notification.tsx
+include ./material_symbol
 
 mixin notificationIcon(type)
 	if type === 'info'
-		span.material-symbols(aria-hidden="true") info
+		+material-symbol("info")
 	else if type === 'success'
-		span.material-symbols(aria-hidden="true") check_circle
+		+material-symbol("check_circle")
 	else if type === 'error'
-		span.material-symbols(aria-hidden="true") error
+		+material-symbol("error")
 	else if type === 'warning'
-		span.material-symbols(aria-hidden="true") warning
+		+material-symbol("warning")
 
 
 mixin notification(options)
@@ -39,4 +40,4 @@ mixin notification(options)
 		//- if isDismissible
 		//- 	.notification-close-btn
 		//- 		button(aria-label=translate('close'))
-		//- 			span.material-symbols(aria-hidden="true") close
+		//- 			+material-symbol("close")
diff --git a/services/web/app/views/_mixins/previous_page_link.pug b/services/web/app/views/_mixins/previous_page_link.pug
index 5218c6a6aa..1b646a04d2 100644
--- a/services/web/app/views/_mixins/previous_page_link.pug
+++ b/services/web/app/views/_mixins/previous_page_link.pug
@@ -1,4 +1,6 @@
+include ./material_symbol
+
 mixin previous-page-link(href, text)
 	a.previous-page-link(href=href)
-		i.material-symbols.material-symbols-rounded(aria-hidden="true") arrow_left_alt
+		+material-symbol-rounded("arrow_left_alt")
 		| #{text}
diff --git a/services/web/app/views/layout/language-picker-bootstrap-5.pug b/services/web/app/views/layout/language-picker-bootstrap-5.pug
index 47a9bc5d53..44997a8ca4 100644
--- a/services/web/app/views/layout/language-picker-bootstrap-5.pug
+++ b/services/web/app/views/layout/language-picker-bootstrap-5.pug
@@ -1,3 +1,5 @@
+include ../_mixins/material_symbol
+
 li.dropdown.dropup.subdued(dropdown).language-picker
 	button#language-picker-toggle.btn.btn-link.btn-inline-link(
 		dropdown-toggle,
@@ -9,7 +11,7 @@ li.dropdown.dropup.subdued(dropdown).language-picker
 		tooltip=translate('language')
 		title=translate('language')
 	)
-		span.material-symbols(aria-hidden="true") translate
+		+material-symbol("translate")
 		| &nbsp;
 		span.language-picker-text #{settings.translatedLanguages[currentLngCode]}
 
@@ -22,4 +24,4 @@ li.dropdown.dropup.subdued(dropdown).language-picker
 					a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams, role="menuitem", class=isActive ? 'dropdown-item active' : 'dropdown-item', aria-selected=isActive ? 'true' : 'false')
 						| #{settings.translatedLanguages[subdomainDetails.lngCode]}
 						if subdomainDetails.lngCode === currentLngCode
-							span.material-symbols.dropdown-item-trailing-icon(aria-hidden="true") check
+							+material-symbol("check", "dropdown-item-trailing-icon")
diff --git a/services/web/app/views/subscriptions/plans/_faq_new.pug b/services/web/app/views/subscriptions/plans/_faq_new.pug
index c91fa8471f..3c926fb22d 100644
--- a/services/web/app/views/subscriptions/plans/_faq_new.pug
+++ b/services/web/app/views/subscriptions/plans/_faq_new.pug
@@ -1,5 +1,6 @@
 include ./_plans_faq_tabs
 include ../../_mixins/eyebrow
+include ../../_mixins/material_symbol
 
 - var managingYourSubscription = 'managingYourSubscription'
 - var overleafIndividualPlans = 'overleafIndividualPlans'
@@ -87,4 +88,4 @@ include ../../_mixins/eyebrow
 				data-bs-target=bootstrapVersion === 5 ? "#contactUsModal" : undefined
 			)
 				span(style="margin-right: 4px") #{translate('contact_support')}
-				i.icon-md.material-symbols.material-symbols-rounded.material-symbols-arrow-right(aria-hidden="true") arrow_right_alt
+				+material-symbol-rounded("arrow_right_alt", "icon-md")
diff --git a/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug b/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug
index f312ebeb46..a598f4774c 100644
--- a/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug
+++ b/services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug
@@ -1,5 +1,6 @@
 //- If the `plans-page-bs5` split test has been completed, remove the `data-toggle` and `data-target` because it is not needed anymore (bs5 uses `data-bs-toggle` and `data-bs-target`)
-
+include ../../_mixins/material_symbol
+	
 mixin managingYourSubscription()
 	.ol-accordions-container
 		.custom-accordion-item
@@ -14,7 +15,7 @@ mixin managingYourSubscription()
 			)
 				| Can I change plans or cancel later?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="managingYourSubscriptionQ1")
 				.custom-accordion-body
 					span Yes, you can do this at any time by going to 
@@ -32,7 +33,7 @@ mixin managingYourSubscription()
 			)
 				| If I change or cancel my Overleaf plan, will I lose my projects?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="managingYourSubscriptionQ2")
 				.custom-accordion-body
 					| No. Changing or canceling your plan won’t affect your projects, the only change will be to the features available to you. You can see which features are available only on paid plans in the comparison table.
@@ -48,7 +49,7 @@ mixin managingYourSubscription()
 			)
 				| Can I pay by invoice or purchase order?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="managingYourSubscriptionQ3")
 				.custom-accordion-body
 					| This is possible when you’re purchasing a group subscription for five or more people, or a site license. For individual subscriptions, we can only accept payment online via credit card, debit card, or PayPal.
@@ -64,7 +65,7 @@ mixin managingYourSubscription()
 			)
 				| How do I view/update the credit card being charged for my subscription?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="managingYourSubscriptionQ4")
 				.custom-accordion-body
 					| You can view and update the card on file by going to Account > 
@@ -96,7 +97,7 @@ mixin overleafIndividualPlans()
 			)
 				| How does the free trial work?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ1")
 				.custom-accordion-body
 					span You get full access to your chosen plan during your 7-day free trial, and there’s no obligation to continue beyond the trial. Your card will be charged at the end of your trial unless you cancel before then. To cancel, go to 
@@ -124,7 +125,7 @@ mixin overleafIndividualPlans()
 			)
 				| What’s a collaborator on an Overleaf individual subscription?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ2")
 				.custom-accordion-body
 					| A collaborator is someone you invite to work with you on a project. So, for example, on our Standard plan you can have up to 10 people collaborating with you on any given project. 
@@ -141,7 +142,7 @@ mixin overleafIndividualPlans()
 			)
 				| The individual Standard plan has 10 project collaborators, does it mean that 10 people will be upgraded?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ3")
 				.custom-accordion-body
 					span No. Only the subscriber’s account will be upgraded. An individual Standard subscription allows you to invite 10 people per project to edit the project with you. Your collaborators can access features such as the full document history and extended compile time, but 
@@ -159,7 +160,7 @@ mixin overleafIndividualPlans()
 			)
 				| Do collaborators also have access to the editing and collaboration features I’ve paid for?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ4")
 				.custom-accordion-body
 					span If you have an Overleaf subscription, then your project collaborators will have access to features like real-time track changes and document history, but 
@@ -177,7 +178,7 @@ mixin overleafIndividualPlans()
 			)
 				| Can I purchase an individual plan on behalf of someone else?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ5")
 				.custom-accordion-body
 					| Individual subscriptions must be purchased by the account that will be the end user. If you want to purchase a plan for someone else, you’ll need to provide them with relevant payment details to enable them to make the purchase. 
@@ -193,7 +194,7 @@ mixin overleafIndividualPlans()
 			)
 				| Who is eligible for the Student plan?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ6")
 				.custom-accordion-body
 					| As the name suggests, the Student plan is only for students at educational institutions. This includes graduate students.
@@ -209,7 +210,7 @@ mixin overleafIndividualPlans()
 			)
 				| Can I transfer an individual subscription to someone else?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafIndividualPlansQ7")
 				.custom-accordion-body
 					| No. Individual plans can’t be transferred. 
@@ -232,7 +233,7 @@ mixin overleafGroupPlans()
 			)
 				| What’s the difference between users and collaborators on an Overleaf group subscription?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafGroupPlansQ1")
 				.custom-accordion-body
 					div On any of our group plans, the number of users refers to the number of people you can invite to join your group. All of these people will have access to the plan’s paid-for features across all their projects, such as real-time track changes and document history. 
@@ -249,7 +250,7 @@ mixin overleafGroupPlans()
 			)
 				| What is the benefit of purchasing an Overleaf Group plan?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafGroupPlansQ2")
 				.custom-accordion-body
 					| Our Group subscriptions allow you to purchase access to our premium features for multiple people. They’re easy to manage, help save on paperwork, and allow groups of 5 or more to purchase via purchase order (PO). We also offer discounts on purchases of Group subscriptions for more than 20 users; just get in touch with our 
@@ -275,7 +276,7 @@ mixin overleafGroupPlans()
 			)
 				| Who is eligible for the educational discount?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafGroupPlansQ3")
 				.custom-accordion-body
 					| The educational discount for group subscriptions is for students or faculty who are using Overleaf primarily for teaching. 
@@ -291,7 +292,7 @@ mixin overleafGroupPlans()
 			)
 				| How do I add more licenses to my group subscription, and what will it cost?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafGroupPlansQ4")
 				.custom-accordion-body
 					div 
@@ -340,7 +341,7 @@ mixin overleafGroupPlans()
 			)
 				| How do I upgrade my plan from Group Standard to Group Professional?
 				span.custom-accordion-icon
-					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
+					+material-symbol-outlined("keyboard_arrow_down")
 			.collapse(id="overleafGroupPlansQ5")
 				.custom-accordion-body
 					| You can upgrade your plan from Group Standard to Group Professional on the 
diff --git a/services/web/app/views/user/passwordReset.pug b/services/web/app/views/user/passwordReset.pug
index 410e79fbb2..ed806c32cd 100644
--- a/services/web/app/views/user/passwordReset.pug
+++ b/services/web/app/views/user/passwordReset.pug
@@ -1,5 +1,6 @@
 extends ../layout-marketing
 include ../_mixins/recaptcha
+include ../_mixins/material_symbol
 
 block vars
 	- bootstrap5PageStatus = 'disabled'
@@ -48,7 +49,7 @@ block content
 						div(data-ol-custom-form-message="no-password-allowed-due-to-sso" hidden)
 							.notification.notification-type-error(aria-live="polite" style="margin-bottom: 10px;")
 								.notification-icon
-									span.material-symbols.material-symbols-rounded(aria-hidden="true") error
+									+material-symbol-rounded("error")
 								.notification-content-and-cta
 									.notification-content
 										p
diff --git a/services/web/app/views/user/restricted.pug b/services/web/app/views/user/restricted.pug
index bcc2e8499f..0140064a99 100644
--- a/services/web/app/views/user/restricted.pug
+++ b/services/web/app/views/user/restricted.pug
@@ -1,4 +1,5 @@
 extends ../layout-marketing
+include ../_mixins/material_symbol
 
 block content
 	main.content#main-content
@@ -9,5 +10,5 @@ block content
 						h1 #{translate("restricted_no_permission")}
 					p
 						a.inline-material-symbols(href="/")
-							span.material-symbols(aria-hidden="true") arrow_left_alt
+							+material-symbol("arrow_left_alt")
 							| #{translate("take_me_home")}
diff --git a/services/web/config/settings.defaults.js b/services/web/config/settings.defaults.js
index 43544814fd..07558a0420 100644
--- a/services/web/config/settings.defaults.js
+++ b/services/web/config/settings.defaults.js
@@ -919,7 +919,7 @@ module.exports = {
           col: ['width'],
           figure: ['class', 'id', 'style'],
           figcaption: ['class', 'id', 'style'],
-          i: ['aria-hidden', 'aria-label', 'class', 'id'],
+          i: ['aria-hidden', 'aria-label', 'class', 'id', 'translate'],
           iframe: [
             'allowfullscreen',
             'frameborder',
diff --git a/services/web/frontend/js/features/contact-form/search.js b/services/web/frontend/js/features/contact-form/search.js
index 10e2ab2f63..1787a068be 100644
--- a/services/web/frontend/js/features/contact-form/search.js
+++ b/services/web/frontend/js/features/contact-form/search.js
@@ -47,8 +47,9 @@ export function setupSearch(formEl) {
 
         const iconEl = document.createElement('i')
         iconEl.className = 'material-symbols dropdown-item-trailing-icon'
-        iconEl.innerText = 'open_in_new'
+        iconEl.textContent = 'open_in_new'
         iconEl.setAttribute('aria-hidden', 'true')
+        iconEl.translate = false
         linkEl.append(iconEl)
 
         resultsEl.append(liEl)
diff --git a/services/web/frontend/js/features/form-helpers/create-icon.js b/services/web/frontend/js/features/form-helpers/create-icon.js
index fc26724bee..13b2a04bf3 100644
--- a/services/web/frontend/js/features/form-helpers/create-icon.js
+++ b/services/web/frontend/js/features/form-helpers/create-icon.js
@@ -2,6 +2,7 @@ export default function createIcon(type) {
   const icon = document.createElement('span')
   icon.className = 'material-symbols'
   icon.setAttribute('aria-hidden', 'true')
+  icon.setAttribute('translate', 'no')
   icon.textContent = type
   return icon
 }
diff --git a/services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/table-rendering-error.ts b/services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/table-rendering-error.ts
index 63ad0a297a..68da3ab058 100644
--- a/services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/table-rendering-error.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/table-rendering-error.ts
@@ -17,6 +17,7 @@ export class TableRenderingErrorWidget extends WidgetType {
     const iconType = document.createElement('span')
     iconType.classList.add('material-symbols')
     iconType.setAttribute('aria-hidden', 'true')
+    iconType.setAttribute('translate', 'no')
     iconType.textContent = 'info'
     icon.appendChild(iconType)
     warning.appendChild(icon)
diff --git a/services/web/frontend/stylesheets/app/editor/history-react.less b/services/web/frontend/stylesheets/app/editor/history-react.less
index c9a8ef9bb9..9ceb5ae3fc 100644
--- a/services/web/frontend/stylesheets/app/editor/history-react.less
+++ b/services/web/frontend/stylesheets/app/editor/history-react.less
@@ -390,7 +390,7 @@ history-root {
       background-color: @neutral-10;
     }
 
-    span.material-symbols {
+    .material-symbols {
       vertical-align: middle;
       font-size: inherit;
     }
diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less
index f66bd83d13..6c5bf9b582 100644
--- a/services/web/frontend/stylesheets/app/website-redesign.less
+++ b/services/web/frontend/stylesheets/app/website-redesign.less
@@ -169,7 +169,7 @@
           }
         }
 
-        i.material-symbols {
+        .material-symbols {
           color: var(--sapphire-blue);
         }
       }
@@ -627,7 +627,7 @@
           }
         }
 
-        i.material-symbols {
+        .material-symbols {
           vertical-align: middle;
           text-decoration: none;
         }
@@ -949,7 +949,7 @@
     font-weight: 500;
     color: var(--green-50);
 
-    i.material-symbols {
+    .material-symbols {
       vertical-align: middle;
       padding-bottom: 3px;
       font-size: 24px;
@@ -1023,7 +1023,7 @@
       .box-shadow-button-input();
     }
 
-    i {
+    .material-symbols {
       vertical-align: middle;
       margin-left: var(--spacing-02);
       padding-bottom: 3px;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/homepage.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/homepage.scss
index f6b30f143f..3f3ec3d900 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/homepage.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/homepage.scss
@@ -284,7 +284,7 @@
       margin-top: var(--spacing-06);
       margin-bottom: var(--spacing-04);
 
-      i.material-symbols {
+      .material-symbols {
         vertical-align: middle;
         text-decoration: none;
       }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
index c3be2cdbaf..8164f1eedd 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
@@ -58,7 +58,7 @@
       @include box-shadow-button-input;
     }
 
-    i {
+    .material-symbols {
       vertical-align: middle;
       margin-left: var(--spacing-02);
       padding-bottom: 3px;
@@ -378,7 +378,7 @@
           }
         }
 
-        i.material-symbols {
+        .material-symbols {
           color: var(--sapphire-blue);
         }
       }
diff --git a/services/web/modules/user-activate/app/views/user/activate.pug b/services/web/modules/user-activate/app/views/user/activate.pug
index 1b48041f1c..deebe0b08a 100644
--- a/services/web/modules/user-activate/app/views/user/activate.pug
+++ b/services/web/modules/user-activate/app/views/user/activate.pug
@@ -3,6 +3,8 @@ extends ../../../../../app/views/layout-website-redesign
 block vars
 	- isWebsiteRedesign = true
 
+include ../../../../../app/views/_mixins/material_symbol
+
 block content
 	main.content.content-alt#main-content
 		.container
@@ -11,8 +13,7 @@ block content
 					.notification.notification-type-success(aria-live="off" role="alert")
 						.notification-content-and-cta
 							.notification-icon
-								span.material-symbols(aria-hidden="true")
-									| check_circle
+								+material-symbol("check_circle")
 							.notification-content
 								p
 									| #{translate("nearly_activated")}