diff --git a/projects/packages/jetpack-mu-wpcom/changelog/DOTCOM-15077-wp-admin-add-icons-and-remove-hover b/projects/packages/jetpack-mu-wpcom/changelog/DOTCOM-15077-wp-admin-add-icons-and-remove-hover
new file mode 100644
index 0000000000000..2a74cce7a3f2e
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/changelog/DOTCOM-15077-wp-admin-add-icons-and-remove-hover
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Add icons to the new Help Center menu panel
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php b/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php
index a9d5d86cb4f7f..66eb9a7a45465 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php
+++ b/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center-menu-panel.php
@@ -16,6 +16,24 @@
*/
class Help_Center_Menu_Panel {
+ /**
+ * Get the SVG icon markup for a given icon name.
+ *
+ * @param string $icon_name The name of the icon to retrieve.
+ * @return string The SVG markup.
+ */
+ private static function get_icon( $icon_name ) {
+ $icons = array(
+ 'comment' => '',
+ 'backup' => '',
+ 'page' => '',
+ 'video' => '',
+ 'rss' => '',
+ );
+
+ return $icons[ $icon_name ] ?? '';
+ }
+
/**
* Check if the help center menu panel should be displayed.
*
@@ -54,7 +72,7 @@ public static function add_menu_panel( $wp_admin_bar ) {
array(
'parent' => 'help-center-menu-panel-chat',
'id' => 'help-center-chat-support',
- 'title' => __( 'Chat support', 'jetpack-mu-wpcom' ),
+ 'title' => self::get_icon( 'comment' ) . '' . __( 'Chat support', 'jetpack-mu-wpcom' ) . '',
)
);
@@ -63,7 +81,7 @@ public static function add_menu_panel( $wp_admin_bar ) {
array(
'parent' => 'help-center-menu-panel-chat',
'id' => 'help-center-chat-history',
- 'title' => __( 'Chat history', 'jetpack-mu-wpcom' ),
+ 'title' => self::get_icon( 'backup' ) . '' . __( 'Chat history', 'jetpack-mu-wpcom' ) . '',
)
);
@@ -83,7 +101,7 @@ public static function add_menu_panel( $wp_admin_bar ) {
array(
'parent' => 'help-center-menu-panel-links',
'id' => 'help-center-support-guides',
- 'title' => __( 'Support guides', 'jetpack-mu-wpcom' ),
+ 'title' => self::get_icon( 'page' ) . '' . __( 'Support guides', 'jetpack-mu-wpcom' ) . '',
)
);
@@ -92,7 +110,7 @@ public static function add_menu_panel( $wp_admin_bar ) {
array(
'parent' => 'help-center-menu-panel-links',
'id' => 'help-center-courses',
- 'title' => __( 'Courses', 'jetpack-mu-wpcom' ),
+ 'title' => self::get_icon( 'video' ) . '' . __( 'Courses', 'jetpack-mu-wpcom' ) . '',
'href' => 'https://wordpress.com/support/courses/',
'meta' => array(
'target' => '_blank',
@@ -105,7 +123,7 @@ public static function add_menu_panel( $wp_admin_bar ) {
array(
'parent' => 'help-center-menu-panel-links',
'id' => 'help-center-product-updates',
- 'title' => __( 'Product updates', 'jetpack-mu-wpcom' ),
+ 'title' => self::get_icon( 'rss' ) . '' . __( 'Product updates', 'jetpack-mu-wpcom' ) . '',
'href' => 'https://wordpress.com/blog/category/product-features/',
'meta' => array(
'target' => '_blank',
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss
index 801c47370dfc1..7e7ce1e13dd18 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss
@@ -473,5 +473,35 @@
}
}
}
+
+ #wp-admin-bar-help-center {
+
+ li {
+
+ .ab-item {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 12px;
+
+ svg.help-center-menu-icon {
+ fill: currentColor;
+ padding: 0;
+ position: unset;
+
+ @media (max-width: 782px) {
+ padding: 0 !important;
+ }
+ }
+
+ &:hover {
+
+ svg {
+ fill: #7b90ff;
+ }
+ }
+ }
+ }
+ }
}
}