[breadcrumb] Change files-ng breadcrumb separators to SVG

Add a new left pointing arrow SVG asset for use as file path separator
in RTL layouts.

The left pointing arrow asset was produced by hand flipping the points
in the existing right pointing arrow asset.

Changes the p:before separator for the files-ng bread crumbs to use SVG
assets instead of a text character pulled out from the current font.

Bug: 1035691
Change-Id: I61549e16a85ba2c709016fbd4272a860d2d2054c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2090553
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#747920}

ui/file_manager/file_manager/foreground/images/files/ui/arrow_left.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+ <polygon points="13.333 6.175 9.213 10 13.333 13.825 12.065 15 6.667 10 12.065 5"/>
+</svg>

ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js

@@ -26,12 +26,20 @@ const breadCrumbTemplate = `
     }
 
     p + p:before {
+      -webkit-mask-image: url(../../images/files/ui/arrow_right.svg);
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      background-color: currentColor;
       content: '>';
       min-width: 20px;
       margin: 0;
       vertical-align: middle;
     }
 
+    :host-context(body[dir='rtl']) p:before {
+      -webkit-mask-image: url(../../images/files/ui/arrow_left.svg);
+    }
+
     p[hidden] button[elider] {
       display: none;
     }