1 files changed, 225 insertions, 126 deletions
diff --git a/sprites/svg-sprite/svg-sprite-navigation.css b/sprites/svg-sprite/svg-sprite-navigation.css
index a24836dc5928..910fb4b5231e 100644
--- a/sprites/svg-sprite/svg-sprite-navigation.css
+++ b/sprites/svg-sprite/svg-sprite-navigation.css
@@ -1,126 +1,225 @@
-.svg-ic_apps_24px {
-	background-position: 0 0;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_arrow_back_24px {
-	background-position: 0 -24px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_arrow_drop_down_24px {
-	background-position: 0 -48px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_arrow_drop_down_circle_24px {
-	background-position: 0 -72px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_arrow_drop_up_24px {
-	background-position: 0 -96px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_arrow_forward_24px {
-	background-position: 0 -120px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_cancel_24px {
-	background-position: 0 -144px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_check_24px {
-	background-position: 0 -168px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_chevron_left_24px {
-	background-position: 0 -192px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_chevron_right_24px {
-	background-position: 0 -216px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_close_24px {
-	background-position: 0 -240px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_expand_less_24px {
-	background-position: 0 -264px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_expand_more_24px {
-	background-position: 0 -288px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_fullscreen_24px {
-	background-position: 0 -312px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_fullscreen_exit_24px {
-	background-position: 0 -336px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_menu_24px {
-	background-position: 0 -360px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_more_horiz_24px {
-	background-position: 0 -384px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_more_vert_24px {
-	background-position: 0 -408px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_refresh_24px {
-	background-position: 0 -432px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_unfold_less_24px {
-	background-position: 0 -456px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
-.svg-ic_unfold_more_24px {
-	background-position: 0 -480px;
-	background-repeat: no-repeat;
-	background-image: url(svg-sprite-navigation.svg);
-}
-
+.svg-ic_apps_24px {
+	background: url(svg-sprite-navigation.svg) 25% 0 no-repeat;
+}
+
+.svg-ic_apps_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_arrow_back_24px {
+	background: url(svg-sprite-navigation.svg) 0 75% no-repeat;
+}
+
+.svg-ic_arrow_back_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_arrow_downward_24px {
+	background: url(svg-sprite-navigation.svg) 0 25% no-repeat;
+}
+
+.svg-ic_arrow_downward_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_arrow_drop_down_24px {
+	background: url(svg-sprite-navigation.svg) 25% 25% no-repeat;
+}
+
+.svg-ic_arrow_drop_down_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_arrow_drop_down_circle_24px {
+	background: url(svg-sprite-navigation.svg) 50% 0 no-repeat;
+}
+
+.svg-ic_arrow_drop_down_circle_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_arrow_drop_up_24px {
+	background: url(svg-sprite-navigation.svg) 50% 25% no-repeat;
+}
+
+.svg-ic_arrow_drop_up_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_arrow_forward_24px {
+	background: url(svg-sprite-navigation.svg) 0 50% no-repeat;
+}
+
+.svg-ic_arrow_forward_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_arrow_upward_24px {
+	background: url(svg-sprite-navigation.svg) 25% 50% no-repeat;
+}
+
+.svg-ic_arrow_upward_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_cancel_24px {
+	background: url(svg-sprite-navigation.svg) 50% 50% no-repeat;
+}
+
+.svg-ic_cancel_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_check_24px {
+	background: url(svg-sprite-navigation.svg) 75% 0 no-repeat;
+}
+
+.svg-ic_check_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_chevron_left_24px {
+	background: url(svg-sprite-navigation.svg) 75% 25% no-repeat;
+}
+
+.svg-ic_chevron_left_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_chevron_right_24px {
+	background: url(svg-sprite-navigation.svg) 75% 50% no-repeat;
+}
+
+.svg-ic_chevron_right_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_close_24px {
+	background: url(svg-sprite-navigation.svg) 0 0 no-repeat;
+}
+
+.svg-ic_close_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_expand_less_24px {
+	background: url(svg-sprite-navigation.svg) 25% 75% no-repeat;
+}
+
+.svg-ic_expand_less_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_expand_more_24px {
+	background: url(svg-sprite-navigation.svg) 50% 75% no-repeat;
+}
+
+.svg-ic_expand_more_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_fullscreen_24px {
+	background: url(svg-sprite-navigation.svg) 75% 75% no-repeat;
+}
+
+.svg-ic_fullscreen_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_fullscreen_exit_24px {
+	background: url(svg-sprite-navigation.svg) 100% 0 no-repeat;
+}
+
+.svg-ic_fullscreen_exit_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_menu_24px {
+	background: url(svg-sprite-navigation.svg) 100% 25% no-repeat;
+}
+
+.svg-ic_menu_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_more_horiz_24px {
+	background: url(svg-sprite-navigation.svg) 100% 50% no-repeat;
+}
+
+.svg-ic_more_horiz_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_more_vert_24px {
+	background: url(svg-sprite-navigation.svg) 100% 75% no-repeat;
+}
+
+.svg-ic_more_vert_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_refresh_24px {
+	background: url(svg-sprite-navigation.svg) 0 100% no-repeat;
+}
+
+.svg-ic_refresh_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_subdirectory_arrow_left_24px {
+	background: url(svg-sprite-navigation.svg) 25% 100% no-repeat;
+}
+
+.svg-ic_subdirectory_arrow_left_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_subdirectory_arrow_right_24px {
+	background: url(svg-sprite-navigation.svg) 50% 100% no-repeat;
+}
+
+.svg-ic_subdirectory_arrow_right_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_unfold_less_24px {
+	background: url(svg-sprite-navigation.svg) 75% 100% no-repeat;
+}
+
+.svg-ic_unfold_less_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+
+.svg-ic_unfold_more_24px {
+	background: url(svg-sprite-navigation.svg) 100% 100% no-repeat;
+}
+
+.svg-ic_unfold_more_24px-dims {
+	width: 24px;
+	height: 24px;
+}
+