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.
Answers (2)
By zooming in on the image, you can see that you're seeing a slice, about half an icon 8 ball pool
You need to check the markup around where you insert your images and check what CSS is being applied.
5 Months
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!
1 Year
By zooming in on the image, you can see that you're seeing a slice, about half an icon 8 ball pool
You need to check the markup around where you insert your images and check what CSS is being applied.
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!