ComboStrap UI - Icon Component

The icon component permits your to create an icon :

• from the material design icons library
• from a SVG media file located in your media library

The icon component supports all material design icon.

To show a material design icon:

• Go to https://materialdesignicons.com/
• Select your icon
• Save its name
• And use it in the name attribute of the icon component

Example with the arrow-down-circle

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

The icon component supports the rendering of SVG file located in the media library

By default, svg files can't be uploaded because they can embedded script and makes it more difficult.

To upload SVG files, you may:

• transfer the files directly on your server in a location under the media directory (ie DOKUWIKI_HOME/data/media)
• or allows the upload of SVG file by adding the SVG extension into the mime.local.conf file

svg image/svg+xml

Then, you can render it by giving the media id into the name attributes:

<icon name="logo.svg" color="orange"/>

• Output:

This component does not support inline SVG because it's a property of HTML.

If you authorize the direct use of HTML, you can also show inline SVG. See ComboStrap UI - Native HTML Inline Icon

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

<icon name="logo.svg" color="pink" />

The width and height attributes take the default value of 24px but you can overwrite them.

<icon name="logo.svg" color="pink" width="96px" height="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 component uses a icon of materialdesignicons.com, the icon is downloaded 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/

This component uses the simplexml module that is enabled by default. It should be then no problem for most of the platform.