material-components_material-web/components/button/lib/_icon.scss

/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

// stylelint-disable selector-class-pattern --
// Selector '.mdc-*' should only be used in this project.

@mixin static-styles() {
  // 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 to ensure overrides apply.
  .mdc-button__icon-slot-container {
    display: inline-flex;

    ::slotted(*),
    .mdc-button__icon {
      @include icon;
    }
  }

  .mdc-button__icon--leading {
    ::slotted(*),
    .mdc-button__icon {
      @include icon-leading;
    }
  }

  .mdc-button__icon--trailing {
    ::slotted(*),
    .mdc-button__icon {
      @include icon-trailing;
    }
  }
}

@mixin icon() {
  display: inline-flex;
  position: relative;
  writing-mode: horizontal-tb;
}

@mixin icon-leading() {
  margin-inline-end: 8px;
}

@mixin icon-trailing() {
  margin-inline-start: 8px;
}