check_box_outline icon takes additional space

Question

I have some trouble with my component's design using angular and angular-material frameworks.

Everything is based on a mat-sidenav-container. The sidenav contains accordion - the expandable list of, let's say "categories". Within each expansion panel there is a selection list of items. So far, so good.

Above the the selection list I added a regular mat-list which contains one item. The item contains the caption and the "select all" option. For "select all" utility I used the relevant, clickable mat-icon.

Everything seemed to work well, except the situation when mat-icon is set to check_box_outline. Such icon causes the horizontal scroll bar appears within side nav. It looks like there is some blank space added after the icon, but I don't understand why. It doesn't appear for other icons, neither check_box_outline_blank nor indeterminate_check_box.

Has anyone the idea what exactely caused this bug and how to prevent the scroll bar appearance?

I put the relevant code and a demo on stackblitz (within the app folder). I kept the code as simple as possible just to demonstrate the issue. I'd appreciate any help.

Answer 1

Using the F12 tools, I cannot see the width of the faulty element but it looks as if the inner content of the mat-icon element is taken into account in the overflow of the mat-sidenav container:

<mat-icon _ngcontent-c0="" class="mat-icon material-icons" role="img" aria-hidden="true">
              check_box_outline
</mat-icon>

When I edit check_box_outline in the rendered HTML, the scrollbar adapts to the new content, even if that content is not displayed.

Adding the following CSS style to styles.css appears to solve the problem (see the modified stackblitz):

.material-icons {
    overflow: hidden;
}