fix(button): Increase specifity of button icon's CSS class (#2242)

Since we can't guarantee the order of CSS loading (MDC Button and Material Icons Font), we need to make icon-related classes a higher specificity than the .material-icons font CSS class.

demos/button.html

@@ -20,10 +20,10 @@
     <title>Button - Material Components Catalog</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
+    <link rel="stylesheet" href="/assets/button.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="/assets/button.css">
     <script src="/ready.js"></script>
     <style>
       .demo-wrapper {

packages/mdc-button/mdc-button.scss

@@ -26,6 +26,14 @@
   @include mdc-button-container-fill-color(transparent);
   @include mdc-button-ink-color(primary);
   @include mdc-states(primary);
+
+  // The icon CSS class overrides styles defined in the .material-icons CSS
+  // class, which is loaded separately so the order of CSS definitions is not
+  // guaranteed. Therefore, increase specifity by nesting this class to ensure
+  // overrides apply.
+  .mdc-button__icon {
+    @include mdc-button__icon_;
+  }
 }
 
 .mdc-button--raised,
@@ -53,8 +61,4 @@
 .mdc-button--dense {
   @include mdc-button--dense_;
 }
-
-.mdc-button__icon {
-  @include mdc-button__icon_;
-}
 // postcss-bem-linter: end