@taiga-ui/core/styles/components/icons.less

Core library for creating Angular components and applications using Taiga UI

/**
 * @name Icons
 * @selector [tuiIcons]
 *
 * @description
 * Icons directive applies styles to ::before and ::after pseudo elements
 *
 * @vars
 * --t-icon-start — depending on the data-icon-start, it can serve as either a mask (`svg`),
  a background (`image`), or content (`font`) for the ::before element
 * --t-icon-end — depending on the data-icon-end, it can serve as either a mask (`svg`),
  a background (`image`), or content (`font`) for the ::after element
 *
 * @example
 * <button tuiIcons data-icon-start="svg" style="--t-icon-start: url('icon.svg')"></button>
 *
 * @see-also
 * Button, Icon, Link
 */
[tuiIcons] {
    --t-icon-start: none;
    --t-icon-end: none;

    &::before,
    &::after {
        content: '';
        inline-size: 1em;
        block-size: 1em;
        line-height: 1em;
        font-size: 1.5rem;
        flex-shrink: 0;
        box-sizing: content-box;
        background: currentColor;
    }

    &::before {
        display: var(--t-icon-start, none);
        mask: var(--t-icon-start) no-repeat center/contain padding-box;
    }

    &::after {
        display: var(--t-icon-end, none);
        mask: var(--t-icon-end) no-repeat center/contain padding-box;
    }

    &[data-icon-start='image']::before {
        mask: none;
        background: var(--t-icon-start) no-repeat center/contain padding-box;
    }

    &[data-icon-end='image']::after {
        mask: none;
        background: var(--t-icon-end) no-repeat center/contain padding-box;
    }

    &[data-icon-start='font']::before,
    &[data-icon-end='font']::after {
        display: grid;
        mask: none;
        background: none;
        font: 1.3em/1 var(--tui-font-icon, inherit);
        text-align: center;
        place-content: center;
        text-transform: none;
    }

    &[data-icon-start='font']::before {
        content: var(--t-icon-start);
    }

    &[data-icon-end='font']::after {
        content: var(--t-icon-end);
    }
}