diff --git a/examples/components/App.jsx b/examples/components/App.jsx
index 684b2cfa0..aab2995ac 100644
--- a/examples/components/App.jsx
+++ b/examples/components/App.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import NotFound from '../../src/components/404';
+import NotFound from '../../src/components/404';
 import Layout from '../../src/components/Layout';
 import AsideNav from '../../src/components/AsideNav';
 import {AlertComponent, ToastComponent} from '../../src/components/index';
 import {mapTree} from '../../src/utils/helper';
+import {Icon} from '../../src/components/icons';
 import '../../src/locale/en';
 import {
   Router,
@@ -668,7 +670,9 @@ export class App extends React.PureComponent {
                 key="expand-toggle"
                 className={cx('AsideNav-itemArrow')}
                 onClick={e => toggleExpand(link, e)}
-              />
+              >
+                <Icon icon="right-arrow-bold" className="icon" />
+              </span>
             );
           }
 
diff --git a/scss/layout/_aside.scss b/scss/layout/_aside.scss
index c1dc9dc7c..1c11874ff 100644
--- a/scss/layout/_aside.scss
+++ b/scss/layout/_aside.scss
@@ -24,7 +24,7 @@
     line-height: px2rem(17px);
     margin-top: px2rem(2px);
 
-    &::before {
+    &:empty:before {
       content: '';
       display: inline-block;
       transform-origin: center;
@@ -36,10 +36,22 @@
       background-repeat: no-repeat;
     }
 
-    .#{$ns}AsideNav-item.is-open > a > &::before {
+    .#{$ns}AsideNav-item.is-open > a > &:empty:before {
       transform: rotate(90deg);
       color: $Layout-asideLink-onActive-arrowColor;
     }
+
+    > svg {
+      color: $Layout-asideLink-color;
+      width: px2rem(10px);
+      height: px2rem(10px);
+      transform-origin: center;
+      transition: transform 0.2s ease;
+    }
+
+    .#{$ns}AsideNav-item.is-open > a > & > svg {
+      transform: rotate(90deg);
+    }
   }
 
   &-itemBadge {