chromium/chrome/browser/resources/settings/safety_hub/safety_hub_card.html

<style include="cr-shared-style settings-shared">
  :host {
    flex-direction: column;
    display: flex;
    flex: 1;
    padding: 14px 16px;
  }

  #header {
    /* Should be 12px when html font-size is 16px */
    font-weight: 500;
    font-size: 0.75rem;
    user-select: none;
  }

  #subheader {
    /* Should be 11px when html font-size is 16px */
    font-size: 0.6875rem;
    line-height: 18px;
    user-select: none;
  }

  iron-icon {
    height: var(--cr-icon-size);
    margin-bottom: 10px;
    width: var(--cr-icon-size);
  }

  iron-icon.green {
    --iron-icon-fill-color: var(--google-green-700);
  }

  iron-icon.yellow {
    --iron-icon-fill-color: var(--google-yellow-700);
  }

  iron-icon.red {
    --iron-icon-fill-color: var(--google-red-600);
  }

  @media (prefers-color-scheme: dark) {
    iron-icon.green {
      --iron-icon-fill-color: var(--google-green-300);
    }

    iron-icon.yellow {
      --iron-icon-fill-color: var(--google-yellow-300);
    }

    iron-icon.red {
      --iron-icon-fill-color: var(--google-red-300);
    }
  }
</style>

<iron-icon id="icon" icon$="[[getStatusIcon(data.state)]]"
    class$="[[getColorClass(data.state)]]">
</iron-icon>
<div id="header">[[data.header]]</div>
<div id="subheader" class="cr-secondary-text">[[data.subheader]]</div>