This is how it looks like in Obsidian by default: 
This is how I would like that .xlsx files would look like:
I tried to make a snippet but I wasn’t able to make it work.
Any help is very appreciated!
Here’s one way to do it.
You can swap in the icon of your choice by replacing the URL at the line mask-image: url("..."); . Or use an image by changing the line to background-image: url("..."); and probably making size and other display adjustments. You can also follow the pattern to add other file types.
Below, I used an “excel” icon from Remix Icons and targeted XLSX and CSV files:
.internal-embed:is([src$=".xlsx"], [src$=".csv"]) .file-embed-icon {
> svg {
display: none;
}
&::before {
content: '-';
background-color: var(--color-green);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M2.85858 2.87732L15.4293 1.0815C15.7027 1.04245 15.9559 1.2324 15.995 1.50577C15.9983 1.52919 16 1.55282 16 1.57648V22.4235C16 22.6996 15.7761 22.9235 15.5 22.9235C15.4763 22.9235 15.4527 22.9218 15.4293 22.9184L2.85858 21.1226C2.36593 21.0522 2 20.6303 2 20.1327V3.86727C2 3.36962 2.36593 2.9477 2.85858 2.87732ZM4 4.73457V19.2654L14 20.694V3.30599L4 4.73457ZM17 19H20V4.99997H17V2.99997H21C21.5523 2.99997 22 3.44769 22 3.99997V20C22 20.5523 21.5523 21 21 21H17V19ZM10.2 12L13 16H10.6L9 13.7143L7.39999 16H5L7.8 12L5 7.99997H7.39999L9 10.2857L10.6 7.99997H13L10.2 12Z'%3E%3C/path%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: contain;
padding-inline: var(--size-4-2);
}
}
2 Likes