PFElements Icon Element
There are no slots, but if you wish to display some text when JS is disabled, you can put some text inside the pfe-icon tag. For instance, when using a checkmark icon in a server status table, you may wish to display "success" if JS is disabled.
||The default size is 1em, so icon size matches text size.
||The color variant to use. This draws from your theming layer to color the icon. This will set icon color and also background color (if
||boolean attribute||Whether to draw a circular background behind the icon.|
Icon sets are defined in detail in this blog post. The blog post should eventually be absorbed into the official documentation.
There are several powerful variables available to hook into and override default styles.
- Color: the
colorattribute is available to pull icon color from your theming layer. For more fine-grained control,
--pfe-icon--Coloris available to override the color of a specific icon or sets of icons. Examples
- Background color: the
colorattribute is available to pull background color from your theming layer. For more fine-grained control,
--pfe-icon--BackgroundColoris available to override the background color of a specific icon or sets of icons.
npm run build
From the PFElements root directory, run:
Card (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.