Material Icons Copy to Clipboard

readme.md

Copy material.io icons to clipboard on click.

Use User CSS and Javascript extension on Material icons website to use this.

index.css

[icon-item].selected{
	overflow: hidden;
}

[icon-item].selected .icon-name::after{
	content: 'Copied';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3em;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #1a73e8;
	border-left: 1px solid #1a73e8;
	border-right: 1px solid #1a73e8;
	animation: copy-text-anim 1s ease-out forwards;
	will-change: transform, opacity;
}
@keyframes copy-text-anim{
	0%{
		opacity: 0;
		transform: translateY(0%) scale(1.15);
	}
	10%{
		opacity: 1;
		transform: translateY(0%) scale(1);
	}
	90%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

MaterialIconsCopyToClipboard.js

function $(element){
    return document.querySelectorAll(element);
}

function getSvg(url){
    fetch(url)
    .then(function(response) {
        response.text().then(function(text) {
        	if(document.hasFocus()){
        		navigator.clipboard.writeText(text);
        	}
        });
    });
}

var iconPath;

setInterval(function(){
	if($(".mat-drawer-opened").length){
        iconPath = $(".side-nav-links__button--svg")[0].getAttribute("href");
        if(iconPath){
            getSvg(iconPath);
        }
    }
}, 400);