Icons appearing - Custom CSS - recent update?

josh · July 23, 2022, 12:56pm

There are some HTML changes with the Custom Icons that could impact Custom CSS:

Impact to Custom CSS

Note that if you are using Custom CSS and are targeting the icon/svg elements in the following tile types, you may have to update your CSS. With the introduction of Custom Icons, we also standardized some of the html/classes so icons are more consistent across all tiles.

I’ve used shorthand CSS declarations to describe the changes along with a descriptive note, but if you need more details on anything, feel free to ask.

Hyperlink Tile, Rule Tile

Before: .main-content.icon > svg

After: .main-content > .icon > .svg

.icon is now a separate sub-element of the .main-content for consistency

Number Variable Tile, String Variable Tile, Hero Attribute, Temperature Sensor

Before: .data > svg.data-icon.icon

After: .data > div.data-icon.icon > svg

svg is now a sub-element of .icon for consistency

Color Control (with Circle Background)

Before: .icon > .icon-circle-holder > .icon-circle, .icon > svg

After: .icon-circle-holder > .icon-circle, .icon > svg

The .icon-circle-holder is now a sibling of the .icon so the inner content of .icon remains consistent