material_base-8.x-2.x-dev/templates/components/01_atoms/icon.twig

{#
/**
 * Accepted variables:
 * - data:
 *   - value: Icon machine name (for 'font' and 'svg-sprite' types) or markup (render array).
 * - settings:
 *   - type: Icon source type: 'font', 'svg-sprite', FALSE.
 *   - classes: (array) classes for adding to the element.
 *     For example, 'material-icons', 'material-icons-outlined', 'fas', etc.
 * 
 * Examples:
 * @code
 * {% include "@material_base/components/01_atoms/icon.twig" with {
 *   data: {
 *     value: 'face',
 *   }, 
 *   settings: {
 *     type: 'font',
 *     classes: ['material-icons'],
 *   }
 * } %}
 *
 * {% include "@material_base/components/01_atoms/icon.twig" with {
 *   data: {
 *     value: 'chevron_right',
 *   },
 *   settings: {
 *     type: 'svg-sprite',
 *   }
 * } %}
 * @endcode
 */
#}

{% set attributes = create_attribute() %}

{% set classes = [
    'icon',
  ]
%}

{% if settings.classes %}
  {% set classes = classes|merge(settings.classes) %}
{% endif %}

{% if settings.type == 'font' %}
  <i{{ attributes.addClass(classes).setAttribute('aria-hidden', 'true') }}>{{ data.value }}</i>
{% elseif settings.type == 'svg-sprite' %}
  <svg{{ attributes.addClass(classes) }}><use xlink:href="#{{ data.value }}"></use></svg>
{% else %}
  {{ data.value }}
{% endif %}