Vary the icon in a Quartz callout

Callouts are the boxes that—

Quote

—look like this.

I wanted to be able to associate more than one icon with a callout type, and it turned out to be pretty simple. The Quartz manual doesn’t mention it, so I threw together a howto:

1. Patch quartz/plugins/transformers/ofm.ts so data-callout-metadata is always a string:

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 0dea893..4d9e51e 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -481,7 +481,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
                     className: classNames.join(" "),
                     "data-callout": calloutType,
                     "data-callout-fold": collapse,
-                    "data-callout-metadata": calloutMetaData,
+                    "data-callout-metadata": (calloutMetaData || "").trim(),
                   },
                 }

2. Add the following to quartz/styles/custom.scss:

.callout {
  --callout-icon-book: url('data:image/svg+xml;charset=utf-8,<svg class="nc-icon glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="16 16 64 64"><g><path fill="currentColor" d="M22.5,28.3v33.6c15.6,0,18.5,1.9,24,4.7V32.9C43.7,30.1,39.6,28.3,22.5,28.3z M73.5,28.3 c-17.1,0-21.3,1.9-24,4.7v33.6c5.5-2.8,8.4-4.7,24-4.7V28.3z M15.5,31.8v36H44c-4.6-2.2-7.9-3.5-21.5-3.5h-2.3v-2.3V31.8H15.5z M75.9,31.8v30.1v2.3h-2.3c-13.6,0-16.9,1.3-21.5,3.5h28.5v-36H75.9z"></path></g></svg>');
  --callout-icon-newspaper: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 24 24;" xml:space="preserve"><g><g><path fill="currentColor" d="M28,7V3H0v22c0,0,0,4,4,4h25c0,0,3-0.062,3-4V7H28z M4,27c-2,0-2-2-2-2V5h24v20 c0,0.921,0.284,1.559,0.676,2H4z"/><rect x="4" y="9" fill="currentColor" width="20" height="2"/><rect x="15" y="21" fill="currentColor" width="7" height="2"/><rect x="15" y="17" fill="currentColor" width="9" height="2"/><rect x="15" y="13" fill="currentColor" width="9" height="2"/><rect x="4" y="13" fill="currentColor" width="9" height="10"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>');
 
  &[data-callout="quote"] {
    &[data-callout-metadata="+book"] {
      --callout-icon: var(--callout-icon-book);
    }
 
    &[data-callout-metadata="+newspaper"] {
      --callout-icon: var(--callout-icon-newspaper);
    }
  }
}

That’s it. Now you can use callouts like this:

>[!quote]
> 
>Default "quote" callout

Quote

Default “quote” callout

>[!quote +book]
> 
>"Quote" callout with book icon

Quote

“Quote” callout with book icon

>[!quote +newspaper]
> 
>"Quote" callout with newspaper icon

Quote

“Quote” callout with newspaper icon

Note

Obsidian doesn’t render these quite right, but it’s close enough for my purposes.