From 9a4c0cd53306247db57e4b23f6e4f506e76327c3 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 22 Mar 2021 12:24:34 +0100
Subject: [PATCH] Add close icon.

---
 packages/block-library/src/navigation/edit.js    | 3 ++-
 packages/block-library/src/navigation/index.php  | 2 +-
 packages/block-library/src/navigation/style.scss | 7 +++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 3fe527eba810ca..872199706733ca 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -25,6 +25,7 @@ import {
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { closeSmall, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -192,7 +193,7 @@ function Navigation( {
 									setResponsiveMenuOpen( false );
 								} }
 							>
-								X
+								<Icon icon={ closeSmall } />
 							</Button>
 							<div
 								className="wp-block-navigation__responsive-container-content"
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 2e00a8911dd9ef..30ae550a37d4b3 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -166,7 +166,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	<div class="wp-block-navigation__responsive-container" id="modal-1" aria-hidden="true">
 		<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 			<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
-					<button aria-label="Close modal" data-micromodal-close class="wp-block-navigation__responsive-container-close">X</button>
+					<button aria-label="Close modal" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z"></path></svg></button>
 				<div class="wp-block-navigation__responsive-content" id="modal-1-content">
 					<ul class="wp-block-navigation__container">%1$s</ul>
 				</div>
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 8ce0c4f5ed56e7..672615b4d234d8 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -92,9 +92,12 @@
 	position: absolute;
 	top: 60px;
 	right: 16px;
-	font-size: 1rem;
-	background-color: #000;
 	color: #fff;
+
+	svg {
+		fill: currentColor;
+	}
+
 	@include break-mobile() {
 		display: none;
 	}