@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  /* block: during load show NOTHING (not the raw ligature name like "note_add"); swap to the glyph when
     ready. This is the recommended setting for icon fonts — it eliminates the "icons show as text" flash. */
  font-display: block;
  src: url('./MaterialSymbolsOutlined-Regular.ttf') format('truetype');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

/* GLOBAL icon rule (unscoped) for the office-suite `.mi` / in-document `.pm-icon` icon spans.
   Angular's per-component emulated encapsulation was not reaching some `.mi` spans (e.g. the Documents
   File menu rendered the ligature name "note_add" as literal text while the ribbon icons were fine).
   A global rule matches `.mi` regardless of the [_ngcontent]/[_nghost] attributes, and !important on the
   ligature-critical properties overrides any inherited font so the ligature always resolves to a glyph.
   Every `.mi` in the app denotes a Material-Symbols icon, so this is safe app-wide. */
.mi, .pm-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga' !important;
  -webkit-font-feature-settings: 'liga' !important;
  font-variant-ligatures: normal !important;
}