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

Core library for creating Angular components and applications using Taiga UI

@import '@taiga-ui/core/styles/taiga-ui-local.less';

/**
 * @name Icon
 * @selector tui-icon
 *
 * @description
 * Container for displaying icons colored with CSS (color/background)
 *
 * @vars
 * --t-icon — depending on the data-icon, it can serve as either a mask (`svg`),
  a background (`image`), or content (`font`) for the icon.
 * --t-icon-bg — mask for the background
 *
 * @example
 * <tui-icon data-icon="svg" style="--t-icon: url('icon.svg')"></tui-icon>
 *
 * @see-also
 * Icons
 */
tui-icon {
    position: relative;
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    font-size: 1.5rem;
    flex-shrink: 0;
    border: 0 solid transparent;
    vertical-align: middle;
    box-sizing: border-box;
    mask: var(--t-icon-bg) no-repeat center/contain;

    @media @tui-mouse {
        &[data-appearance='icon']:hover {
            color: var(--tui-text-secondary);
        }
    }

    &::after,
    &[tuiIcons]::after {
        .fullsize();

        content: '';
        display: block;
        mask: var(--t-icon) no-repeat center/contain;
        background: currentColor;
    }

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

    &[data-icon='font']::after {
        content: var(--t-icon);
        mask: none;
        background: none;
        font: 1em/1 var(--tui-font-icon, inherit);
        text-align: center;
        text-transform: none;
    }
}