diff --git a/src/dragonglass/mparse.py b/src/dragonglass/mparse.py
index 22219f9..4c21ed6 100644
--- a/src/dragonglass/mparse.py
+++ b/src/dragonglass/mparse.py
@@ -865,6 +865,11 @@ class ObsidianStyleBlockquotes(Extension):
class ObsidianBlockQuote(BlockQuoteProcessor):
CALLOUT = re.compile(r'^\[!([a-z]+)\]([-+])?(?:[ ]+(.*))?')
+ CALLOUT_DEFICON = 'pencil'
+ CALLOUT_ICONS = {
+ 'info': 'info',
+ 'tip': 'flame'
+ }
def normal_blockquote(self, parent: etree.Element, block: str) -> None:
sibling = self.lastChild(parent)
@@ -889,7 +894,9 @@ class ObsidianStyleBlockquotes(Extension):
title = callout_type.title()
base_div = etree.SubElement(parent, 'div', {'class': 'callout', 'data-callout': callout_type})
title_div = etree.SubElement(base_div, 'div', {'class': 'callout-title'})
- # TODO: add title icon here
+ icon_div = etree.SubElement(title_div, 'div', {'class': 'callout-icon'})
+ etree.SubElement(icon_div, 'span',
+ {'data-lucide': self.CALLOUT_ICONS.get(callout_type, self.CALLOUT_DEFICON)})
inner_title_div = etree.SubElement(title_div, 'div', {'class': 'callout-title-inner'})
inner_title_div.text = title
lines.pop(0)
diff --git a/src/dragonglass/style.py b/src/dragonglass/style.py
index aac5a31..48f1799 100644
--- a/src/dragonglass/style.py
+++ b/src/dragonglass/style.py
@@ -81,6 +81,11 @@ th {
line-height: 1.3;
align-items: flex-start;
}
+.callout-icon {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+}
.callout-title-inner {
font-weight: 600;
color: inherit;
@@ -91,6 +96,10 @@ th {
padding: 0;
background-color: transparent;
}
+.lucide {
+ width: 1em;
+ height: 1em;
+}
/* Following are styles generated by Pygments "tango" style */
pre { line-height: 125%; }
diff --git a/src/dragonglass/template.py b/src/dragonglass/template.py
index 309d79e..f7fd978 100644
--- a/src/dragonglass/template.py
+++ b/src/dragonglass/template.py
@@ -33,6 +33,10 @@ DEFAULT_TEMPLATE = """
{% endfor %}
{% endif %}
+
+