Icons for answer types are too small

[russellshome]

when choosing an answer type the icons are very small

Reproduction

Add a Form
Add a question
Choose answer type

Bug summary

in the previous version the css below is applied but not on the new version

.umb-card-grid i {
    font-size: 30px;
    line-height: 20px;
    margin-top: 6px;
    margin-bottom: 10px;
    display: block
}

Specifics

Version 8.7.6 of Forms

Version 8.15.0 of [Umbraco]

[russellshome]

Icons in v 8.7.5

Icons in v 8.7.6

[AndyButland]

Thanks for reporting. It looks like this is some CSS that was removed in the CMS for 8.15 - see here.

Hence I think it's that you've upgraded to CMS 8.15 that's caused this rather than the update of Forms to 8.7.6.

I'll check first to see if that's planned for restore there before adding it back for Forms.

[AndyButland]

I've reapplied this in forms, under a Forms-specific CSS selector, so the visual display is restored in Forms and we don't apply this styling to other areas of the back-office where it seems it's not longer necessary or wanted.

Expected to be released with 8.8.0.

[bjarnef]

@AndyButland I adjusted part of this in Umbraco core to use <umb-icon> instead so it is also possible to use custom SVG icons.
Forms should probably use this as well.
#579

<umb-icon icon="icon-document" class="icon-document"></umb-icon>

[AndyButland]

Thanks @bjarnef, that seems to work so will go with that rather than porting over the CSS I think. To your knowledge has <umb-icon> been around for a while though? I need to consider latest version of Forms running on an older version of CMS V8.

[bjarnef]

Yes, since Umbraco v8.8.0 as mentioned at bottom in the linked issue 🙂

It would be useful for custom field type and workflow to use a custom SVG icon. E.g. Forms could ship with a Slack icon for the workflows in Umbraco Forms folder in App_Plugins instead of the current chat icon 😁
https://our.umbraco.com/forum/using-umbraco-and-getting-started/106330-how-to-use-custom-svg-icons#comment-331354

[AndyButland]

Yes, works nicely:

[bjarnef]

@AndyButland note it also need to set icon name in class attribute to be backward compatible with font icons in case people are using a custom font icon.

<umb-icon icon="icon-document" class="icon-document"></umb-icon>