Icon

<!-- Material Icon -->
<div class="icon">

    <i class="material-icons icon__mat-icon">add_location</i>

</div>

<!-- Material Icon In Black -->
<div class="icon" style="--icon-color: var(--color-black)">

    <i class="material-icons icon__mat-icon">add_location</i>

</div>

<!-- Material Icon In Orange -->
<div class="icon" style="--icon-color: var(--color-orange)">

    <i class="material-icons icon__mat-icon">add_location</i>

</div>

<!-- Overlaid Text -->
<div class="icon">

    <span class="icon__overlaid-text">CSV</span>

</div>

<!-- Material Icon -->
<div class="icon">
  {% if overlaid_text %}
    <span class="icon__overlaid-text">{{ overlaid_text }}</span>
  {% else %}
    <i class="material-icons icon__mat-icon">{{ icon_name }}</i>
  {% endif %}
</div>

<!-- Material Icon In Black -->
<div class="icon" style="--icon-color: var(--color-black)">
  {% if overlaid_text %}
    <span class="icon__overlaid-text">{{ overlaid_text }}</span>
  {% else %}
    <i class="material-icons icon__mat-icon">{{ icon_name }}</i>
  {% endif %}
</div>

<!-- Material Icon In Orange -->
<div class="icon" style="--icon-color: var(--color-orange)">
  {% if overlaid_text %}
    <span class="icon__overlaid-text">{{ overlaid_text }}</span>
  {% else %}
    <i class="material-icons icon__mat-icon">{{ icon_name }}</i>
  {% endif %}
</div>

<!-- Overlaid Text -->
<div class="icon">
  {% if overlaid_text %}
    <span class="icon__overlaid-text">{{ overlaid_text }}</span>
  {% else %}
    <i class="material-icons icon__mat-icon">{{ icon_name }}</i>
  {% endif %}
</div>
/* Material Icon */
{
  "icon_name": "add_location",
  "label": "Includes recipient locations"
}

/* Material Icon In Black */
{
  "icon_name": "add_location",
  "label": "Includes recipient locations"
}

/* Material Icon In Orange */
{
  "icon_name": "add_location",
  "label": "Includes recipient locations"
}

/* Overlaid Text */
{
  "overlaid_text": "CSV",
  "label": "CSV files"
}

  • Content:
    .icon {
      --icon-color: var(--color-teal);
    
      display: inline-block;
      $icon-size: 24px;
    
      &__overlaid-text {
        font-size: $icon-size / 2;
        font-weight: 700;
        color: $white;
        background: var(--icon-color);
        justify-content: center;
        padding: 2px;
        border-radius: 2px;
        min-width: 4rem;
        vertical-align: middle;
      }
    
      &__mat-icon {
        font-size: $icon-size;
        vertical-align: bottom;
      }
    
      &__mat-icon {
        color: var(--icon-color);
      }
    }
    
  • URL: /components/raw/icon/icon.scss
  • Filesystem Path: src/components/02-elements/icon/icon.scss
  • Size: 471 Bytes

Shows

  1. Either
    • a specified Material Design icon (assuming the full standard font or equivalent to be loaded), or
    • text overlaid on a rounded box; and
  2. a label.