ComboStrap UI - Icon Component

The icon component permits you to create an svg icon such as this one :

• from an icon library
• or from your media library as a SVG media file

<icon name="[library:]name" />

where:

• name is the name of the icon
• library is the optional name of the icon library (if not set, the default is used)

To show a icon:

• Go to a library
• Select your icon and remember its name
• If you are not using the default library, add the library name as prefix

We supports the below libraries.

The name or acronym can be used as library name.

The default library is material-design but you can change this configuration.

An icon is just a svg that is seen as a character.

ComboStrap sets the following properties on a icon by default:

• width and height have the same value (default to 24px)
• color: currentColor by default
• not responsive (no preserveAspectRatio and no max length CSS properties)
• no alignment (ie no left, center or right)

{{:custom-icon.svg?16&type=icon|}}

Example with the arrow-down-circle

<icon name="arrow-down-circle" color="danger" width="96px" height="96px" />

Example with the arrow-down-circle-fill

<icon name="bootstrap:arrow-down-circle-fill" color="blue" width="48px" height="48px" />

Example with a box icon

<icon name="fe:box" color="blue" width="48px" height="48px" />

You can also easily embedded icons from other icon banks by using the svg syntax.

You just need to follow this steps:

• go to your icon repository
• download your icon
• upload it to your media library
• use it as svg with a value of icon for the type attribute

Example with Google icon and the favorite icon

{{:ui:favorite_black_24dp.svg?36&type=icon&color=steelblue|}}

• Output:

In the color attribute, you can set a color value.

ComboStrap detects automatically if the icon is a solid or outline one and sets the color accordingly.

Example with the bootstrap alarm clock

<icon name="bs:alarm" color="pink" />

<icon name="bs:alarm-fill" color="pink" />

The width and height attributes have the same value and takes the default value of 24px but you can overwrite it.

<icon name="logo.svg" width="96px" />

As all ComboStrap UI components do, the icon component supports also all attributes of its underlying svg HTML element. See svg attributes

When the icon does not exist, the component downloads the icons in the namespace set in the icons_namespace configuration.

The default value is :combostrap:icons

On the server, the namespace is a location from the media directory: DOKUWIKI_HOME/data/media/

You can change the default library with the defaultIconLibrary configuration.

At installation time, the default library is material design.

This component uses the DOM module. This module is enabled by default on all hosting platform. It should be then no problem for most of the platform.