Icon

Help visually distinguish and provide extra meaning to certain items or actions. You can pass an icon name or mime type to generate the appropriate icon.

Pulsar currently uses Font Awesome 6 Free, please refer to their website for the full list of available icons.

Save

Basic usage

Twig

{{
    html.icon('save', {
        'label': 'Save'
    })
}}

HTML

<i className="icon-save"><span className="hide">Save</span></i>

Helper options

You can configure this helper using the common helper options, the following options are specific to this helper.

Option	Type	Description
class	string	A space-separated list of additional class names, these will be added to whatever classes the component requires for its own styling
label	string	An optional label which can be accessed by screen readers, this should be used when there is no visible text label which can be used for context

Mime type icons

The icon helper can take a standard mime type string to make it easier to illustrate certain file types.

Microsoft Word

Twig

{{
    html.icon('application/msword', {
        'label': 'Microsoft Word'
    })
}}

HTML

<i className="icon-file-word-o"><span className="hide">Microsoft Word</span></i>