Change user profile's 'votes cast' icon

Question

A very minor 'bug' (in the sense that it slightly bothers me, not as in a glitch or mistake):

The icon in front of the total number of votes cast is the same as the one for upvotes.
Can this be turned into an icon with both an upward (▲) and downward pointing triangle (▼)?

I noticed it's a vector path, so I quickly wrote an alternative code, <path d="M 10 1 l 4 4 h -8 m 0 2 h 8 l -4 4"></path>, which gives:

<svg aria-hidden="true" class="svg-icon iconArrowUpDown"  
width="20" height="20" viewBox="0 0 20 20">
<path d="M 10 1 l 4 4 h -8 m 0 2 h 8 l -4 4"></path>
</svg>

As a user in the comments points out, this 'issue' was brought up years ago on Stack Overflow Meta, here, where two other solutions are given (of which one seems to have become obsolete).

Answer 1

The up triangle certainly sends a confusing message because the vote count includes both downvotes and upvotes. There is also no need for creating new icons, SE's own Stacks design framework already has an up-and-down arrow icon to replace the current one with (see the source repo):

<svg aria-hidden="true" class="svg-icon iconArrowUpDown" width="18" height="18" viewBox="0 0 18 18">
  <path d="m9 1 7 7H2l7-7zm0 16 7-7H2l7 7z"/>
</svg>

Here is how it looks like after replacing the original icon on the profile page:

Give it 6 to 8 weeks to be done. In the meantime, you can use this lightweight snippet to replace the icon:

(() => {
    const SVG_NS = 'http://www.w3.org/2000/svg';
    const ICON_SEL = "div[title*='votes cast'] svg";

    const svg = document.createElementNS(SVG_NS, 'svg');
    svg.classList.add('svg-icon', 'iconArrowUpDown');
    svg.setAttribute('width', '18');
    svg.setAttribute('height', '18');
    svg.setAttribute('viewBox', '0 0 18 18');
    svg.setAttribute('aria-hidden', 'true');

    const path = document.createElementNS(SVG_NS, 'path');
    path.setAttribute('d', 'm9 1 7 7H2l7-7zm0 16 7-7H2l7 7z');

    svg.append(path);

    const icon = document.querySelector(ICON_SEL);
    if (!icon) return;

    icon.replaceWith(svg);
})();

Transpiled to ES5 and minified version:

"use strict";!function(){var t="http://www.w3.org/2000/svg",e=document.createElementNS(t,"svg");e.classList.add("svg-icon","iconArrowUpDown"),e.setAttribute("width","18"),e.setAttribute("height","18"),e.setAttribute("viewBox","0 0 18 18"),e.setAttribute("aria-hidden","true");t=document.createElementNS(t,"path");t.setAttribute("d","m9 1 7 7H2l7-7zm0 16 7-7H2l7 7z"),e.append(t);t=document.querySelector("div[title*='votes cast'] svg");t&&t.replaceWith(e)}();