@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) using mask
 *
 * @vars
 * --t-icon — mask for the icon
 * --t-icon-bg — mask for the background
 *
 * @example
 * <tui-icon 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;
    }
}