Description

The outline version of the icon button is created using an ::after pseudo-element, which adds a border around the button. This element is assigned a z-index: -1, but this causes an issue when the button is placed within an element that has a background color.
Due to the stacking context, the border is rendered behind the direct parent element's background since the button itself does not have a z-index.

Fix:
If the z-index: -1 on the ::after element is not necessary remove it or if it's required add z-index: 0 to the button itself

• igniteui-angular version:
• browser: all

Steps to reproduce

1. Use the outlined version of the icon button inside any element/component that has a background color.

Result

The border goes behind the parent's background

Expected result

the border should be visible

Attachments

No background

Background (observe the last button)

Expected