Icon Sizing

Radzen Studio Angular
1

Hi Radzen,
Angular 2.5.1.3

We are using a button with icon only to access field-specific help. The button is used as it provides tooltips, click event, etc.

We wish to make the icon larger but have not been able to find how to do it without resorting to custom css.

The general tab icon and link components do appear to resize by increasing the font size in all themes we have tested.

Using the General tab button does appear to work with some themes.

E.G.

image
image602×541 66 KB

However, with later themes using identical component properties the icon will not resize.

E.G

image
image602×669 79.6 KB

Any ideas?
Have attached sample screen
icon-samples.zip (743 Bytes)

2

Indeed those themes will not scale the icon size depending on the button font size. You can add this CSS snippet to the styles.css file of your application to allow that:

.ui-button-md .pi {
    font-size: 1.0625em;
    line-height: 2.1875em;
    width: 1.25em;
    font-size: 1.0625em;
}

Then setting the font-size of the button should affect the icon as well.

2 Likes
3

Thanks @korchev
That works great
image