Utility icon not showing

976    Asked by BenPHILLIPS in Business Analyst , Asked on Jul 10, 2021

 am using the below line of code to show the icon but instead it is showing as a dot. Tried on chrome and edge.

Answered by Ranjana Admin

The markup within which you are showing the salesforce lightning icons has had a (max) height set for it ; by enlarging the image you can see that you are seeing a slice through, about halfway up the icon:

You need to examine the markup around where you insert your image and check what CSS is being applied.

Your Answer

Answer (1)

Hey everyone

Ben PHILLIPS, I totally feel your frustration with those utility icons misbehaving. It can be such a headache when your code doesn't play nice with your expectations. From what you've described, it sounds like a CSS issue. The fact that you've tested it on both Chrome and Edge indicates it might not be browser-specific.

The problem you're encountering with the utility icon appearing as a dot usually stems from conflicting styles or improper sizing within the parent container. When you mention "a dot," it's often a sign that the icon is getting cut off or scaled down unexpectedly.

So, here's what I'd recommend: Inspect the CSS around the container where you're placing your icon. Look for any height restrictions, max-height settings, or overflow properties that might be affecting the display. Try adjusting these settings or overriding them to ensure the icon can display properly.

I've faced a similar issue in the past, and it turned out to be an unexpected CSS conflict. Once I sorted that out, the icons displayed beautifully. Hope this advice helps you troubleshoot and get those icons shining as they should! 

9 Months


Parent Categories