diff --git a/CHANGELOG.md b/CHANGELOG.md
index c7d2cbb9aed..430137a6cf4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
## [`master`](https://github.com/elastic/eui/tree/master)
-No public interface changes since `13.8.0`.
+- Fixed alignment of icons and label in `EuiSideNavItem` ([#2297](https://github.com/elastic/eui/pull/2297))
## [`13.8.0`](https://github.com/elastic/eui/tree/v13.8.0)
diff --git a/src-docs/src/views/side_nav/side_nav_complex.js b/src-docs/src/views/side_nav/side_nav_complex.js
index 3aeeaeb26b9..d0f621b72e3 100644
--- a/src-docs/src/views/side_nav/side_nav_complex.js
+++ b/src-docs/src/views/side_nav/side_nav_complex.js
@@ -57,8 +57,12 @@ export default class extends Component {
this.createItem('General'),
this.createItem('Timelion', {
items: [
- this.createItem('Time stuff'),
- this.createItem('Lion stuff'),
+ this.createItem('Time stuff', {
+ icon: ,
+ }),
+ this.createItem('Lion stuff', {
+ icon: ,
+ }),
],
}),
this.createItem('Visualizations'),
diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss
index 437a8325d14..59a4f58c9db 100644
--- a/src/components/side_nav/_side_nav_item.scss
+++ b/src/components/side_nav/_side_nav_item.scss
@@ -34,7 +34,6 @@
.euiSideNavItemButton__content {
display: flex;
align-items: center;
- justify-content: space-between;
}
.euiSideNavItemButton__icon {
@@ -53,6 +52,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ flex-grow: 1;
}
/**
@@ -79,7 +79,6 @@
/**
* 1. Create padding around focus area without indenting the item itself.
- * 2. Align icon and label to the left.
*/
& > .euiSideNavItemButton {
margin-bottom: $euiSizeS;
@@ -89,10 +88,6 @@
margin-left: -$euiSizeS; /* 1 */
width: calc(100% + #{$euiSizeS * 2}); /* 1 */
- .euiSideNavItemButton__content {
- justify-content: flex-start; /* 2 */
- }
-
.euiSideNavItemButton__label {
@include euiTitle('xs');
}