fix(aio): ensure styling of icons is specific to usage

Previously the CSS styling for material icons was too broad and affected
all instances of icons. This commit constrains the position of copy button
icons only to copy buttons.

aio/src/styles/1-layouts/_sidenav.scss

@@ -96,14 +96,6 @@ md-sidenav-container div.mat-sidenav-content {
   width: 100%;
 }
 
-.mat-icon, .material-icons {
-  display: inline-block;
-  position: absolute;
-  top: 6px;
-  right: 8px;
-  color: $mediumgray;
-}
-
 .heading-children.expanded {
   visibility: visible;
   opacity: 1;

aio/src/styles/2-modules/_code.scss

@@ -88,6 +88,11 @@ aio-code.headed-code {
 }
 
 .copy-button {
+  display: inline-block;
+  position: absolute;
+  top: 6px;
+  right: 8px;
+
   color: $lightgray;
   background-color: transparent;
   border: none;
@@ -95,10 +100,10 @@ aio-code.headed-code {
   &:hover {
     color: $mediumgray;
   }
-  
+
   @media (max-width: 480px) {
     top: 0;
-    bottom: 0;
+    right: 0;
   }
 }