Icon

<afp-icon>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

Icons are used to visually represent actions, objects, or concepts. They can be used as standalone elements or within other components such as buttons.

<afp-icon name="check"></afp-icon>

<afp-icon [name]="'check'"></afp-icon>

<AfpIcon name="check"></AfpIcon>

<AfpIcon :name="'check'"></AfpIcon>

Available icons #

All available icons from the default Bootstrap Icons library are listed below.
To use an icon, simply place its name in the name attribute of the AfpIcon component.

You can also click any icon to quickly copy its name to your clipboard.

Examples #

Color #

You can change the color of the icons using the color property. Below are examples of different icon colors.

<afp-icon name="airplane-fill" style="font-size: 2rem; color: red"></afp-icon>

<afp-icon [name]="'airplane-fill'" [style]="'font-size: 2rem; color: red'"></afp-icon>

<AfpIcon name="airplane-fill" style="font-size: 2rem; color: red"></AfpIcon>

<AfpIcon :name="'airplane-fill'" :style="'font-size: 2rem; color: red'"></AfpIcon>

Sizes #

You can easily adjust the size of the icons using the font-size property. Below are examples of different icon sizes.

<div class="afp-cluster afp-align-center">
  <afp-icon name="droplet-fill"></afp-icon>
  <afp-icon name="droplet-fill" style="font-size: 2rem;"></afp-icon>
  <afp-icon name="droplet-fill" style="font-size: 3rem;"></afp-icon>
</div>

<div class="afp-cluster afp-align-center">
  <afp-icon [name]="'droplet-fill'"></afp-icon>
  <afp-icon [name]="'droplet-fill'" [style]="'font-size: 2rem;'"></afp-icon>
  <afp-icon [name]="'droplet-fill'" [style]="'font-size: 3rem;'"></afp-icon>
</div>

<div class="afp-cluster afp-align-center">
  <AfpIcon name="droplet-fill"></AfpIcon>
  <AfpIcon name="droplet-fill" style="font-size: 2rem;"></AfpIcon>
  <AfpIcon name="droplet-fill" style="font-size: 3rem;"></AfpIcon>
</div>

<div class="afp-cluster afp-align-center">
  <AfpIcon :name="'droplet-fill'"></AfpIcon>
  <AfpIcon :name="'droplet-fill'" :style="'font-size: 2rem;'"></AfpIcon>
  <AfpIcon :name="'droplet-fill'" :style="'font-size: 3rem;'"></AfpIcon>
</div>

Use custom icons #

In order to use custom icon libraries, you need to include the library with registerIconLibrary. This function allows you to seamlessly integrate SVG-based Icon Libraries into your application.

import { registerIconLibrary } from '@afp-design-system/core';

registerIconLibrary('libraryName', {
  resolver: (iconName) => "assets/custom-icons/" + iconName + ".svg",
});

After the library has been registered, the icons can be accessed under the specified path. Here's an example of how to access a custom library.

<afp-icon library="libraryName" name="myCustomIcon"></afpc-icon>

Asset path #

By default, the icon component looks for SVG files in the /assets/icons/ directory. If your icons are stored in a different location, you can change the default path using the setAssetPath function. For more details, please refer to the Usage page.

Properties

Learn more about properties.

Name	Description	Reflects
`name`	The name of the icon to draw. Available names depend on the icon library being used. Type `string \| undefined`
`src`	An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can result in XSS attacks. Type `string \| undefined`
`label`	An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and ignored by assistive devices. Type `string` Default `''`
`library`	The name of a registered custom icon library. Type `string` Default `'default'`

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`

CSS Custom Properties

Name	Description	Default
`--afp-icon-size`	The default size of the icon.	`--afp-font-size-lm`

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/icon/icon.js';