openstapps/frontend/app/ICONS.md

Icons

A few notes to our icon set, for users and future maintainers.

You will need to setup fonttools with python

python -m venv .venv && .venv/bin/python -m pip install -r requirements.txt

Alternatively, anything that puts fonttools within your path will do as well.

Usage

To find icon names, visit the Google Material Symbols Page

We have extended the ion-icon element via a directive. Make sure your module imports the IonIconModule, you can then proceed using ion-icons as usual.

The modified ion-icon comes with a few extra features:

• [fill] controls the fill color of the icon.
• [weight] controls the font weight of the icon.
• [size] controls the font size of the icon.
• [grade] controls the font grade of the icon.

All of these attributes are animated as described here.

You can also control these attributes via css:

ion-icon ::ng-deep stapps-icon {
  --fill: 1;
  --grade: 0;
  --weight: 400;
}

Sometimes icon code points cannot be determined automatically, for whatever reason. In this case, you will need to specify the code point manually in the config file.

Icon Font Minification

Icon font minification is done automatically, but requires you to follow a few simple rules:

1. Use the tagged template literal for referencing icon names in TypeScript files and code

SCIcon`icon_name`;

2. When using ion-icon in HTML, reference either icons that went through the SCIcon tag or write them as one of the following:

<!-- do -->
<ion-icon name="icon_name"></ion-icon>
<ion-icon [name]="'icon_name'"></ion-icon>
<!-- don't -->
<ion-icon name="icon_name" />
<!-- self-closing -->
<ion-icon [name]="condition ? 'icon_name' : 'other_icon_name'"></ion-icon>

Icons that are unknown at compile time can be specified in the additionalIcons property of the icons.config.ts file.

The minification can then be done by running

npm run minify-icons

Unfortunately, I was unable to find a JS package that could to the job, and had to rely on the Python module fonttools.