EcoOnline Icon Font

Explore the feasability of using an icon font instead of inline svg or background image svg

Pros

- not heavy on dom (important for large reactive dom pages)
- substantially 'lighter' All assets on this page weigh 30kb (8kb font, 10.7kb css 11.3kb html) Inline SVG would weigh approximately 200kb for the same.
- updates to the font propogate system-wide (without having to update inline svg)
- fewer requests than if background svgs were used

Cons

- “flash of invisible text” or the “flash of unstyled text”
- considerable work making the css match the figma design files (there are small differences between the following icons and the originals)

Comparison

Method	Page Weight	Requests	Cache	CSS Effects
Inline SVG	~200kb	1	No (for most dynamic pages)	Yes (including individual parts)
Background SVGs	~30kb	108	Yes	Yes
Font Icon	~30kb	3	Yes	Yes

Also see

• accessibility
• issues (old)

Example markup

	<div class="i i-action i-xl"><i></i></div>
	<div class="i i-action i-l"><i></i></div>
	<div class="i i-action i-m"><i></i></div>
	<div class="i i-action i-s"><i></i></div>
	<div class="i i-action i-xs"><i></i></div>

Normally the nested 'i' tag wouldn't be needed but the color icons make this necessary so might as well keep it consistent.
This also means that any icon can be made color, and additional indicators can be added like mail with a green dot.

• Action

• Administration

• Advanced EPR

• Advanced RCA

• Analytics

• Asset Register

• Audit

• ChemDoc

• ChemiControl

• Chemical Manager

• Classroom

• Compliance

• Contractor

• CSR

• Custom Lists

• Document

• EcoOnline EHS

Other uses

Statefulness

(use with great discretion)

	<div class="i i-document i-s"><i></i></div>
	<div class="i i-document i-s i-disabled"><i></i></div>
	<div class="i i-document i-s i-success"><i></i></div>
	<div class="i i-document i-s i-warning"><i></i></div>
	<div class="i i-document i-s i-pending"><i></i></div>
	<div class="i i-document i-s i-error"><i></i></div>

Notifications

	<div class="i i-document i-m i-notify"><i></i></div>
	<div class="i i-document i-m i-notify-success"><i></i></div>
	<div class="i i-document i-m i-notify-warning"><i></i></div>
	<div class="i i-document i-m i-notify-pending"><i></i></div>
	<div class="i i-document i-m i-notify-error"><i></i></div>
	<div class="i i-compliance i-m i-notify-error"><i></i></div>
	<div class="i i-classroom i-m i-notify-success"><i></i></div>
	<div class="i i-document i-m i-notify-success i-notify-pulse"><i></i></div>

Loading

	<div class="i i-loading"><i></i></div>
	<div class="i i-spinner i-l"><i></i></div>
	<div class="i i-spinner i-m"><i></i></div>
	<div class="i i-spinner i-s"><i></i></div>
	<div class="i i-spinner i-xs"><i></i></div>

As Links

	<a href="/" class="i i-administration i-l"><i></i></a>
	<a href="/" class="i i-administration i-m"><i></i></a>
	<a href="/" class="i i-administration i-s"><i></i></a>
	<a href="/" class="i i-administration i-xs"><i></i></a>

(Needs to have more target space incorporated)