design update 2

browser/components/SideNavFilter.js

@@ -19,27 +19,51 @@ const SideNavFilter = ({
   counterTotalNote, counterStarredNote
 }) => (
   <div styleName={isFolded ? 'menu--folded' : 'menu'}>
+
     <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
       onClick={handleAllNotesButtonClick}
     >
-      <i className='fa fa-archive fa-fw' />
+      <div styleName='iconWrap'>
+      <img src={isHomeActive
+          ? '../resources/icon/icon-all-active.svg'
+          : '../resources/icon/icon-all.svg'
+        }
+      />
+      </div>
       <span styleName='menu-button-label'>All Notes</span>
       <span styleName='counters'>{counterTotalNote}</span>
     </button>
+
     <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
       onClick={handleStarredButtonClick}
     >
-      <i className='fa fa-star fa-fw' />
+      <div styleName='iconWrap'>
+      <img src={isStarredActive
+          ? '../resources/icon/icon-star-active.svg'
+          : '../resources/icon/icon-star.svg'
+        }
+      />
+      </div>
       <span styleName='menu-button-label'>Starred</span>
       <span styleName='counters'>{counterStarredNote}</span>
     </button>
+
+
     <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
       onClick={handleTrashedButtonClick}
     >
-      <i className='fa fa-trash fa-fw' />
+      <div styleName='iconWrap'>
+      <img src={isTrashedActive
+          ? '../resources/icon/icon-trash-active.svg'
+          : '../resources/icon/icon-trash.svg'
+        }
+      />      
+      </div>
       <span styleName='menu-button-label'>Trash</span>
       <span styleName='counters'>{counterDelNote}</span>
     </button>
+
+
   </div>
 )