Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update icon.md to include subsetting and instancing #5713

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update icon.md to include subsetting and instancing #5713

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions docs/components/icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,43 @@ be set with the
[`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings)<!-- {.external} -->
property.

## Font size optimization

#### Optimize the icon font

To avoid large network transfer costs, subset the font to only
include the icons your application is using via the
`&icon_names` query parameter, using an alphabetically sorted
comma-separated list of icon names (ligatures.)

> [!WARNING]
> `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined` loads
> all 3,000+ icons. Not specifying axes loads the default static configuration
> (weight 400, optical size 24, round 50, grade 0, fill 0) which may or may
> not be your application desired settings. Font payload: **255 KB**

> [!TIP]
> `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block`
> loads only 3 icons. Font payload: **2 KB**

Then, instance the variable font axes to only include the ones your application
will use. Most applications only need a few variations of the axes.

> [!CAUTION]
> `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200`
> Including all variable font axes is usually unnecessary and increases the
> payload. Font payload: **3.2 MB**

> [!TIP]
> `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:[email protected]&icon_names=home,palette,settings&display=block`
> A specific combination of axes is used. Just as an example, the full 'FILL'
> axis provides CSS transitions between states, and 'ROND' 100 is the desired
> design. Font payload: **2 KB**

> [!IMPORTANT]
> Ensure the CSS request includes `&display=block` to prevent a flash
> of unstyled text content (FOUC) showing the ligatures until the font loads.

### Outlined

Outlined symbols use stroke and fill attributes for a light, clean style that
Expand Down