How can I override the browser-generated triangle icon in a <details> element?

Question

I'd like to change the icon with CSS for this snippet of HTML5:

<details>
  <summary>Hello</summary>
  <p>The details</p>
</details>

Any clues?

Answer 1

On WebKit browsers you could do:

summary::-webkit-details-marker {display: none}

summary:before {content: ""}
details[open] summary:before {content: ""}