diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
index 33cd4cb..6fee68e 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
@@ -248,14 +248,12 @@
     if (showPartialLinks) {
       td.appendChild(this._createContextButton(
           GrDiffBuilder.ContextButtonType.ABOVE, section, line, numLines));
-      td.appendChild(document.createTextNode(' - '));
     }
 
     td.appendChild(this._createContextButton(
         GrDiffBuilder.ContextButtonType.ALL, section, line, numLines));
 
     if (showPartialLinks) {
-      td.appendChild(document.createTextNode(' - '));
       td.appendChild(this._createContextButton(
           GrDiffBuilder.ContextButtonType.BELOW, section, line, numLines));
     }
@@ -273,22 +271,26 @@
 
     let text;
     let groups = []; // The groups that replace this one if tapped.
-
     if (type === GrDiffBuilder.ContextButtonType.ALL) {
+      const icon = this._createElement('iron-icon', 'showContext');
+      icon.setAttribute('icon', 'gr-icons:unfold-more');
+      Polymer.dom(button).appendChild(icon);
+
       text = 'Show ' + numLines + ' common line';
       if (numLines > 1) { text += 's'; }
       groups.push(...line.contextGroups);
     } else if (type === GrDiffBuilder.ContextButtonType.ABOVE) {
-      text = '+' + context + '↑';
+      text = '+' + context + ' above';
       groups = GrDiffGroup.hideInContextControl(line.contextGroups,
           context, numLines);
     } else if (type === GrDiffBuilder.ContextButtonType.BELOW) {
-      text = '+' + context + '↓';
+      text = '+' + context + ' below';
       groups = GrDiffGroup.hideInContextControl(line.contextGroups,
           0, numLines - context);
     }
-
-    Polymer.dom(button).textContent = text;
+    const textSpan = this._createElement('span', 'showContext');
+    Polymer.dom(textSpan).textContent = text;
+    Polymer.dom(button).appendChild(textSpan);
 
     button.addEventListener('tap', e => {
       e.detail = {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
index 867a067..debb919 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html
@@ -125,9 +125,9 @@
       buttons = td.querySelectorAll('gr-button.showContext');
 
       assert.equal(buttons.length, 3);
-      assert.equal(Polymer.dom(buttons[0]).textContent, '+10↑');
+      assert.equal(Polymer.dom(buttons[0]).textContent, '+10 above');
       assert.equal(Polymer.dom(buttons[1]).textContent, 'Show 11 common lines');
-      assert.equal(Polymer.dom(buttons[2]).textContent, '+10↓');
+      assert.equal(Polymer.dom(buttons[2]).textContent, '+10 below');
     });
 
     test('newlines 1', () => {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index dea9789..af07552 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -191,11 +191,18 @@
       .contextControl gr-button {
         display: inline-block;
         text-decoration: none;
+        vertical-align: top;
+        line-height: var(--line-height-mono, 18px);
         --gr-button: {
           color: var(--diff-context-control-color);
-          padding: var(--spacing-xs);
+          padding: var(--spacing-xxs) var(--spacing-l);
         }
       }
+      .contextControl gr-button iron-icon {
+        /* should match line-height of gr-button */
+        width: var(--line-height-mono, 18px);
+        height: var(--line-height-mono, 18px);
+      }
       .contextControl td:not(.lineNum) {
         text-align: center;
       }
diff --git a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
index 75ab77a..d36ce3b 100644
--- a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
+++ b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
@@ -24,6 +24,8 @@
       <g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></g>
       <!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
       <g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></g>
+      <!-- This SVG is a copy from material.io https://material.io/icons/#unfold_more -->
+      <g id="unfold-more"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></g>
       <!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
       <g id="search"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></g>
       <!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->