The icon component does not render when styled in CSS

[tgrandjean]

Hi experts.

I am trying to make a somewhat responsive dashboard for a customer. One of my issues is, that the icon component does not resize, when I use the @media function in CSS to control the size and location of various components depending on the device, the dashboard is viewed on.

I've used the same approach as described in this post https://archive.sap.com/discussions/thread/3435559

It works perfect with both image and text objects, but not the Icon object. When I look through the community I don't seem to find anyone with similar problem.

Does any of you know whether the Icon object behaves differently regarding rendering?

Thank you

//thomas

[Martin-Pankraz · Accepted solution]

Hi Thomas,

The icon consists of an HTML div container which holds an HTML span element. The css event "before" on the mentioned span element renders that actual icon. This css selector needs a custom font-size like 10px when you want to work with @media selectors. All of this is calculated by Design Studio from the settings you applied on the Designer. If you want to override you need to tackle the css of the span element.

The best way to investigate what's happening are the browser's developer tools. All of them have a section where you can inspect the HTML tree and assigned css classes and elements.

Kind regards

Martin

[tgrandjean · Accepted solution]

Hi Martin!

Thank you! The issue was due to my css, targeting the height and width of the icon object, when in fact I should med modifying the font-size.. It works like a charm now!

//thomas