Utility icon not showing
am using the below line of code to show the icon but instead it is showing as a dot. Tried on chrome and edge.
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.
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!