chromium/ash/webui/common/resources/cr_elements/cr_icon_button/cr_icon_button.html

<style>
  :host {
    --cr-icon-button-fill-color: var(--google-grey-700);
    --cr-icon-button-icon-start-offset: 0;
    --cr-icon-button-icon-size: 20px;
    --cr-icon-button-size: 36px;
    --cr-icon-button-height: var(--cr-icon-button-size);
    --cr-icon-button-transition: 150ms ease-in-out;
    --cr-icon-button-width: var(--cr-icon-button-size);
    /* Copied from paper-fab.html. Prevents square touch highlight. */
    -webkit-tap-highlight-color: transparent;
    border-radius: 50%;
    color: var(--cr-icon-button-stroke-color,
        var(--cr-icon-button-fill-color));
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: var(--cr-icon-button-height);
    margin-inline-end: var(--cr-icon-button-margin-end,
        var(--cr-icon-ripple-margin));
    margin-inline-start: var(--cr-icon-button-margin-start);
    outline: none;
    overflow: hidden;
    user-select: none;
    vertical-align: middle;
    width: var(--cr-icon-button-width);
  }

  :host-context([chrome-refresh-2023]):host {
    --cr-icon-button-fill-color: currentColor;
    --cr-icon-button-size: 32px;
    position: relative;
  }

  :host(:hover) {
    background-color: var(--cr-icon-button-hover-background-color,
        var(--cr-hover-background-color));
  }

  :host(:focus-visible:focus) {
    box-shadow: inset 0 0 0 2px var(--cr-icon-button-focus-outline-color,
        var(--cr-focus-outline-color));
  }

  @media (forced-colors: active) {
    :host(:focus-visible:focus) {
      /* Use outline instead of box-shadow (which does not work) in Windows
         HCM. */
      outline: var(--cr-focus-outline-hcm);
    }
  }

  :host-context(html:not([chrome-refresh-2023])) :host(:active) {
    background-color: var(--cr-icon-button-active-background-color,
        var(--cr-active-background-color));
  }

  paper-ripple {
    display: none;
  }

  :host-context([chrome-refresh-2023]) paper-ripple {
    --paper-ripple-opacity: 1;
    color: var(--cr-active-background-color);
    display: block;
  }

  :host([disabled]) {
    cursor: initial;
    opacity: var(--cr-disabled-opacity);
    pointer-events: none;
  }

  :host(.no-overlap) {
    --cr-icon-button-margin-end: 0;
    --cr-icon-button-margin-start: 0;
  }

  :host-context([dir=rtl]):host(:not([dir=ltr]):not([multiple-icons_])) {
    transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
  }

  :host-context([dir=rtl]):host(:not([dir=ltr])[multiple-icons_])
      iron-icon {
    transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
  }

  :host(:not([iron-icon])) #maskedImage {
    -webkit-mask-image: var(--cr-icon-image);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--cr-icon-button-icon-size);
    -webkit-transform: var(--cr-icon-image-transform, none);
    background-color: var(--cr-icon-button-fill-color);
    height: 100%;
    transition: background-color var(--cr-icon-button-transition);
    width: 100%;
  }

  @media (forced-colors: active) {
    :host(:not([iron-icon])) #maskedImage {
      background-color: ButtonText;
    }
  }

  #icon {
    align-items: center;
    border-radius: 4px;
    display: flex;
    height: 100%;
    justify-content: center;
    padding-inline-start: var(--cr-icon-button-icon-start-offset);
    /* The |_rippleContainer| must be position relative. */
    position: relative;
    width: 100%;
  }

  iron-icon {
    --iron-icon-fill-color: var(--cr-icon-button-fill-color);
    --iron-icon-stroke-color: var(--cr-icon-button-stroke-color, none);
    --iron-icon-height: var(--cr-icon-button-icon-size);
    --iron-icon-width: var(--cr-icon-button-icon-size);
    transition: fill var(--cr-icon-button-transition),
        stroke var(--cr-icon-button-transition);
  }

  @media (prefers-color-scheme: dark) {
    :host {
      --cr-icon-button-fill-color: var(--google-grey-500);
    }
  }
</style>
<div id="icon">
  <div id="maskedImage"></div>
</div>