Use SVG symbols for icons

[mattmachell]

Summary

Use SVG symbols rather than repeating inlined svgs.

Note, I'm not sure how much you are using inlined SVG for icons as you move forwards, so this may not be a priority. However I thought this feature was worth highlighting as a potential improvement as I've used inlined SVG icons on big design systems before.

Motivation

This follows on from this PR where you implemented inlined SVG for icons to use currentColor for context-aware fill colours.

Maintaining inlined SVGs can lead to drift in contents if paths need updating and increases over the wire HTML if you use icons multiple times on a page of any complexity.

SVG Symbols are a handy way of ensuring you only update in a single place. Some more info on CSS Tricks