/**
 * @license
 * Copyright 2022 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import {css} from 'lit';

export const iconStyles = css`
  iron-icon {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
  }
  /* expected to be used in a 20px line-height inline context */
  iron-icon.size-16 {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
  }

  .material-icon {
    color: var(--deemphasized-text-color);
    font-family: var(--icon-font-family, 'Material Symbols Outlined');
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0;
    vertical-align: top;
  }

  .material-icon.filled {
    font-variation-settings: 'FILL' 1;
  }
`;

/**
 * @license
 * Copyright 2022 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import {css} from 'lit';

export const iconStyles = css`
  iron-icon {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
  }
  /* expected to be used in a 20px line-height inline context */
  iron-icon.size-16 {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
  }

  .material-icon {
    color: var(--deemphasized-text-color);
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0;
    vertical-align: top;
  }

  .material-icon.filled {
    font-variation-settings: 'FILL' 1;
  }
`;

--- 
+++ 
@@ -22,7 +22,7 @@
 
   .material-icon {
     color: var(--deemphasized-text-color);
-    font-family: 'Material Symbols Outlined';
+    font-family: var(--icon-font-family, 'Material Symbols Outlined');
     font-weight: normal;
     font-style: normal;
     font-size: 20px;
Make the icon-font-family for icons be a CSS var.

This is necessary for our internal tool as it uses a different
font-family.

Release-Notes: skip
Change-Id: I65c404387804a246539c41ef9d01f0208176db48
