Better alignment of the "Copy to clipboard" icon

[IgorMinar]

Currently we vertically align the "copy to clipboard" to the center of code snippet:

This looks unusual to me. We could either move it up:

Which I'm afraid won't look much better. Or we could move it top-right corner, where it originally was. But in order for the icon not to be too far away from the code, we should constrain the width of the content and center it. Maybe something along the lines of this:

@sjtrimble how did we end up with the icon on the left? was there a reason for it?

[sjtrimble]

I believe this was an unintentional result of https://github.com/angular/angular/pull/16226/files

@petebacondarwin Can you verify that I'm not destroying anything by adding the class back in in #16298?

[gkalpak]

It seems unexpected to have a generic class (such as mat-icon or material-icons) position items on the top right corner. I think we need to target the copy button (or other icons that need it) specifically.

[petebacondarwin]

@gkalpak I don't think that is what the PR is doing. It is just providing normal styling for icons. There is other styling for putting it in the top right, which relies upon this generic styling.

[petebacondarwin]

See https://github.com/angular/angular/blob/master/aio/src/styles/2-modules/_code.scss#L90-L102

[gkalpak]

@petebacondarwin, I was not referring to a specific PR. I was referring to the fact that we use a very generic selector to target all icons, while the desired behavior is probably to affect sidenav icons only: here

_{(I see now that it is not related to the copy button issue anyway. @sjtrimble, can you confirm that we shouldn't be doing this, but specifically target icons inside the sidenav?}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}