Icons don't resize with text

[hannalaakso]

WCAG 2.1 requires that user can resize text to at least 200% . When text is resized (see #1519), our icons don't resize with text. We might not wish them to, this issue is partly for reference.

Crown icon when text resized to 32 (16 x 2 = 200%)

(Once #1568 is fixed)

Warning icon when text resized to 200% in Chrome

Arrow icon when text resized to 200%

How text was resized in browsers

Chrome

Settings > Appearance > Customise fonts

Firefox

Set View > Zoom > Zoom text only. Press +/-
or Preferences > Language and appearance > Font size

Safari

To increase the font size, hold down Alt and click on 'View' menu > Make text bigger
To decrease the font size, hold down Alt and click on 'View' menu > Make text smaller

Edge

Can't resize text apart from "Reading view" which removes form elements from the view.

IE 8-11

Page > Text size > Largest

iOS

Text can't resized in browser. See #882

Android Chrome/Firefox

Settings > Accessibility > Text scaling

[NickColley]

We're going to only fix the icons that lose their meaning when scaled up, in the examples shown here that means the warning icon but there may be other components, so we should double check.