Working with Icons

#### Search Results

Search

# Working with Icons

This document covers the following topics:

- Using Own Icons

- Using Bootstrap Icons

- Using Bootstrap Icons as Icon Fonts

- Using Bootstrap Icons as SVG Icon Files

- Using SVG from Natural Programs

## Using Own Icons

You can use your own icons in controls and in CSS in the following ways:

- Reference icon files by URL, whereby the icons do not have to be contained in the User Interface Component or in the web application

- Copy icon files to the User Interface Component and use the relative URL

## Using Bootstrap Icons

The packaged Bootstrap Icons (https://icons.getbootstrap.com/) can be used in controls and CSS. The Bootstrap Icons library contains over 2000 icons. The icons are available as icon fonts as well as SVG icons. The icon library comes along within the cisnatural.war in the following subfolder:

cisnatural/HTMLBasedGUI/bootstrapicons

The subfolder /icons contains the SVG icon files.

To see the available icons, open the url https://icons.getbootstrap.com/sprite/

## Using Bootstrap Icons as Icon Fonts

Icon fonts can be used in responsive and non-responsive controls. The required CSS file is automatically integrated into the page. There is no need to copy files to the User Interface Component. No additional files need to be applied to the pages.

### Support in Responsive Controls

Icon fonts can be used in name/nameprop properties of all controls. A BMOBILE:BUTTON control with a name value

`BUTTON <i class="bi-person-square"></i>`

will be rendered as

The color of the icon can be manipulated by applying CSS style setting:

`BUTTON <i style=”color:green” class="bi-person-square"></i>`

Icon fonts can also be used in the title/titleprop properties (tooltips). A BMOBILE:FTEXTOUT with a title value

`FTEXTOUT Icon in title <i class="bi-tools"></i>`

Will be rendered as:

The BMOBILE:IHTML also support this.

### Support in Non-Responsive Controls

Icon fonts are supported in the following controls:

COLUMN
CSVCOLUMN
METHODLINK
STATUSBAR
TEXTOUT
TITLEBAR

The IHTML also supports this feature.

However, icon fonts are not supported in title/titleprop.

## Using Bootstrap Icons as SVG Icon Files

SVG icon files can be used from the library without copying any file to the User Interface Component. It is sufficient to set a relative URL property value.

Example:

`<bmobile:icon iconurl="../HTMLBasedGUI/bootstrapicons/icons/person-circle.svg">`

Will be rendered as

## Using SVG from Natural Programs

SVG XML can be applied as property value from Natural program. In responsive controls this is supported in all controls with `nameprop` and `titleprop`.

IHTML and BMOBILE:IHTML also support this feature.

However, in non-responsive controls SVG XML is only supported in controls that also support a `straighttext` property.

Example:

    <svg class='bi' width='128' height='128' fill='currentColor'>
    <use href='../HTMLBasedGUI/bootstrapicons/bootstrap-icons.svg#shop'/>
    </svg>

in an `BMOBILE:IHTML` control will be rendered as:

### On this page

- Using Own Icons
- Using Bootstrap Icons
- Using Bootstrap Icons as Icon Fonts
- Using Bootstrap Icons as SVG Icon Files
- Using SVG from Natural Programs