Swap the 'canvas' label in file explorer with an icon?

Custom CSS & Theme Design
,
1

In the file explorer, would it be possible to swap canvas next to canvas files for the canvas icon?

The Lucide code for this icon is layout-dashboard .

image
image1408×868 98.4 KB

2

From Discord:

.nav-file-title[data-path$=".canvas"] .nav-file-tag {
  font-size: 0px;

  color: var(--color-accent);
  align-self: stretch;
  padding: 0 var(--size-2-1);

  &::after {
    display: flex;
    content: "";
    height: 100%;
    width: 12px;
    background-color: var(--nav-item-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='svg-icon lucide-layout-dashboard'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'%3E%3C/rect%3E%3Crect x='14' y='3' width='7' height='5' rx='1'%3E%3C/rect%3E%3Crect x='14' y='12' width='7' height='9' rx='1'%3E%3C/rect%3E%3Crect x='3' y='16' width='7' height='5' rx='1'%3E%3C/rect%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }
}

obsidian_canvas_icon.css (875 Bytes)