Accessibility of Icons
By using inline SVG, we have the possibility to make graphical assets both responsive and interactive. In order to do so, use the Icon or IconPrimary component. These components provide the needed runtime processing.
If your icons are purely decorative, you’ll need to manually add an aria-hidden (results in
aria-hidden="true") attribute to each of your icons so your app is "accessible".
size="auto" to force the icon to inherit the size of its parent element.
My H1 with an icon
My H4 with the same icon
Scalable Vector Graphics can be set up to be scalable and actually respond to the
- has a fixed size
- is responsive