Fix line break icon rendering in MS Edge

client/src/components/Draftail/__snapshots__/index.test.js.snap

@@ -12,6 +12,7 @@ Object {
   },
   "enableLineBreak": Object {
     "description": "Line break",
+    "icon": "M.436 633.471l296.897-296.898v241.823h616.586V94.117h109.517v593.796H297.333v242.456z",
   },
   "entityTypes": Array [
     Object {

client/src/components/Draftail/index.js

@@ -13,6 +13,9 @@ export { default as EmbedBlock } from './blocks/EmbedBlock';
 
 export { default as ModalWorkflowSource } from './sources/ModalWorkflowSource';
 
+// 1024x1024 SVG path rendering of the "↵" character, that renders badly in MS Edge.
+const BR_ICON = 'M.436 633.471l296.897-296.898v241.823h616.586V94.117h109.517v593.796H297.333v242.456z';
+
 /**
  * Registry for client-side code of Draftail plugins.
  */
@@ -79,7 +82,10 @@ const initEditor = (fieldName, options) => {
       onSave={serialiseInputValue}
       placeholder={STRINGS.WRITE_HERE}
       spellCheck={true}
-      enableLineBreak={{ description: STRINGS.LINE_BREAK }}
+      enableLineBreak={{
+        description: STRINGS.LINE_BREAK,
+        icon: BR_ICON,
+      }}
       showUndoControl={{ description: STRINGS.UNDO }}
       showRedoControl={{ description: STRINGS.REDO }}
       maxListNesting={4}