@finastra/icon
v1.8.1
Published
Icon Web Component
Downloads
461
Readme
Icon
Icon displays an icon with a chosen name from the Material Icons font, or from any font that supports ligatures.
Usage
Import
npm i @finastra/icon
import '@finastra/icon';
...
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
<fds-icon>bolt</fds-icon>
API
Properties
| Property | Attribute | Type | Default | Description |
|---------------|---------------|---------------|------------|--------------------------------|
| dense
| dense
| boolean
| false | Dense size of the icon 18px
. |
| disabled
| disabled
| boolean
| false | |
| error
| error
| boolean
| false | Use error color. |
| extra_large
| extra_large
| boolean
| false | Dense size of the icon 48px
. |
| gradient
| gradient
| boolean
| false | Use gradient color. |
| info
| info
| boolean
| false | |
| large
| large
| boolean
| false | Large size of the icon 36px
. |
| primary
| primary
| boolean
| false | Use primary color. |
| secondary
| secondary
| boolean
| false | Use secondary color. |
| styles
| | CSSResult[]
| ["styles"] | |
| success
| success
| boolean
| false | Use success color. |
| warning
| warning
| boolean
| false | |
Slots
| Name | Description |
|-----------|--------------------------------------------------|
| default
| The name of the icon to display (e.g. credit_card). See Material Icons for an index of all available icons. |
CSS Custom Properties
| Property | Default | Description |
|-------------------|---------|-----------------------------------|
| --fds-icon-size
| "24px" | Size of the icon, default 24px
. |