Swap icons in editor v reading view?

[uiop_on]

Hi,

There’s an icon in the top-right of a note that switches between editor and reader mode. Confusingly it shows a pencil in ‘reader view’, and an open book in ‘editor view’ - which feels the wrong way around. I’m aware the developers envisaged it as a button, but my eyes see it as a status (and toggle) so it feels reversed.

Similar questions were posed here and here.

I’ve tried the ‘Icon Swapper’ and ‘Iconic’ plugins but neither of them seem to allow this icon to be changed.

From the inspector I see that the icons are labelled class="svg-icon lucide-book-open" and class="svg-icon lucide-edit-3", but I don’t have enough knowledge of CSS to know if these can be altered… Is there a way to swap the icons using a CSS snippet?

Any advice appreciated!

Cheers.

[holroy]

In theory you should be able to hide that icon, or resize it away to oblivion, and then use ::after or ::before to add an image/icon like described in this post:

Is there a way to use SVG as content in a pseudo element ::before or ::after

[ariehen]

Not really necessary, I know, but I do something related in my test vault to know I’m in Live Preview.

---

You could try this to flip the icons.

[data-mode='source'] .view-action[aria-label^="Current view"] {
    & > svg { 
        display: none; }

    &::before {
        content: 'o';  
        padding: 2px;
        padding-inline: 5px;     
        background-color: var(--icon-color);
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBlbmNpbC1saW5lIj48cGF0aCBkPSJNMTIgMjBoOSIvPjxwYXRoIGQ9Ik0xNi4zNzYgMy42MjJhMSAxIDAgMCAxIDMuMDAyIDMuMDAyTDcuMzY4IDE4LjYzNWEyIDIgMCAwIDEtLjg1NS41MDZsLTIuODcyLjgzOGEuNS41IDAgMCAxLS42Mi0uNjJsLjgzOC0yLjg3MmEyIDIgMCAwIDEgLjUwNi0uODU0eiIvPjxwYXRoIGQ9Im0xNSA1IDMgMyIvPjwvc3ZnPg==");
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
    } 
}

[data-mode='preview'] .view-action[aria-label^="Current view"] {
    & > svg { 
        display: none; }

    &::before {
        content: 'o';  
        padding: 2px;
        padding-inline: 5px;     
        background-color: var(--icon-color);
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvb2stb3BlbiI+PHBhdGggZD0iTTEyIDd2MTQiLz48cGF0aCBkPSJNMyAxOGExIDEgMCAwIDEtMS0xVjRhMSAxIDAgMCAxIDEtMWg1YTQgNCAwIDAgMSA0IDQgNCA0IDAgMCAxIDQtNGg1YTEgMSAwIDAgMSAxIDF2MTNhMSAxIDAgMCAxLTEgMWgtNmEzIDMgMCAwIDAtMyAzIDMgMyAwIDAgMC0zLTN6Ii8+PC9zdmc+"); 
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
    } 
}

If you want to change the icons, go to https://lucide.dev/icons, pick an icon, Copy Data URL and paste it between the "".

[uiop_on]

Yes that worked perfectly! Many thanks