diff --git a/src/Button/Button.css b/src/Button/Button.css
index 2b87e81..8a3a8cd 100644
--- a/src/Button/Button.css
+++ b/src/Button/Button.css
@@ -38,4 +38,10 @@ button[bt] {
     --button-color: hsl(42, 93%, 46%);
     --button-hover-color: hsl(37, 97%, 39%);
   }
+
+  &[bt-dropdown] > svg {
+    width: 0.75em;
+    height: 0.75em;
+    margin-inline-start: 0.4em;
+  }
 }
diff --git a/src/Button/Button.stories.ts b/src/Button/Button.stories.ts
index 1a9bb73..621630d 100644
--- a/src/Button/Button.stories.ts
+++ b/src/Button/Button.stories.ts
@@ -23,3 +23,23 @@ export const Red: Story = {
 export const Yellow: Story = {
   render: () => html`<button bt bt-yellow>Button text</button>`,
 };
+
+export const Dropdown: Story = {
+  render: () =>
+    html`<button bt bt-dropdown popovertarget="dropdown-menu-popover">
+        Open
+        <svg></svg>
+      </button>
+      <div popover bt id="dropdown-menu-popover">
+        <ul bt-dropdown-menu>
+          <li bt-separated>
+            <p>John Doe</p>
+            <p>john.doe@authelia.com</p>
+          </li>
+          <li><a href="#">Menu item 1</a></li>
+          <li><a href="#">Menu item 2</a></li>
+          <li bt-separated><a href="#">Menu item 3</a></li>
+          <li><button type="button">Sign out</button></li>
+        </ul>
+      </div>`,
+};
diff --git a/src/Button/Button.ts b/src/Button/Button.ts
index 7ce4584..d0d7c19 100644
--- a/src/Button/Button.ts
+++ b/src/Button/Button.ts
@@ -1,4 +1,11 @@
-import { injectStyles } from '../utils';
+import { injectStyles, onElementConnected } from '../utils';
 import styles from './Button.css?raw&inline';
+import dropdownSvg from './dropdown.svg?raw&inline';
 
 injectStyles(styles);
+
+onElementConnected('button[bt-dropdown] > svg', (svg) => {
+  if (!svg.hasAttribute('viewBox')) {
+    svg.outerHTML = dropdownSvg;
+  }
+});
diff --git a/src/Button/dropdown.svg b/src/Button/dropdown.svg
new file mode 100644
index 0000000..af307fb
--- /dev/null
+++ b/src/Button/dropdown.svg
@@ -0,0 +1,5 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+    viewBox="0 0 10 6">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        d="m1 1 4 4 4-4" />
+</svg>
\ No newline at end of file
diff --git a/src/Docs.mdx b/src/Docs.mdx
index f3a468e..1b44da4 100644
--- a/src/Docs.mdx
+++ b/src/Docs.mdx
@@ -39,30 +39,43 @@ body {
 
 # Avatar
 
+Selector: `button[bt-avatar]`
+
 <Canvas of={AvatarStories.Default} />
 
 # Badge
 
+Selector: `span[bt-badge]`
+
 <Canvas of={BadgeStories.Normal} />
 <Canvas of={BadgeStories.Large} />
 
 # Button
 
+Selector: `button[bt]`
+
 <Canvas of={ButtonStories.Default} />
 <Canvas of={ButtonStories.Green} />
 <Canvas of={ButtonStories.Red} />
 <Canvas of={ButtonStories.Yellow} />
+<Canvas of={ButtonStories.Dropdown} />
 
 # DropdownMenu
 
+Selector: `ul[bt-dropdown-menu]`
+
 <Canvas of={DropdownMenuStories.Default} />
 
 # Header
 
+Selector: `header[bt]`
+
 <Canvas of={HeaderStories.Default} />
 
 # Heading
 
+Selector: `h1[bt], h2[bt], h3[bt], h4[bt], h5[bt], h6[bt]`
+
 <Canvas of={HeadingStories.Level1} />
 <Canvas of={HeadingStories.Level2} />
 <Canvas of={HeadingStories.Level3} />
@@ -70,18 +83,26 @@ body {
 
 # Input label
 
+Selector: `label[bt]`
+
 <Canvas of={InputLabelStories.Default} />
 
 # Loader
 
+Selector: `[role="progressbar"][bt]`
+
 <Canvas of={LoaderStories.Default} />
 
 # Main
 
+Selector: `main[bt]`
+
 <Canvas of={MainStories.Default} />
 
 # Notifications
 
+Selector: `section[bt-notifications]`
+
 <Canvas
   of={NotificationStories.Default}
   source={{
@@ -102,15 +123,21 @@ document.dispatchEvent(new ErrorNotificationEvent('Failure'));
 
 # Popover
 
+Selector: `[popover][bt]`
+
 <Canvas of={PopoverStories.Default} />
 
 # Table
 
+Selector: `table[bt]`
+
 <Canvas of={TableStories.Default} />
 <Canvas of={TableStories.WithSelection} />
 
 # Text
 
+Selector: `[bt-text]`
+
 <Canvas of={TextStories.Default} />
 <Canvas of={TextStories.Green} />
 <Canvas of={TextStories.Red} />
diff --git a/src/DropdownMenu/DropdownMenu.stories.ts b/src/DropdownMenu/DropdownMenu.stories.ts
index a791054..27bdf11 100644
--- a/src/DropdownMenu/DropdownMenu.stories.ts
+++ b/src/DropdownMenu/DropdownMenu.stories.ts
@@ -4,8 +4,8 @@ import { html } from 'lit';
 const meta: Meta = {
   title: 'BTDropdownMenu',
   render: () => {
-    return html`<button bt type="button" popovertarget="dropdown-menu-popover">
-        Open
+    return html`<button bt bt-dropdown type="button" popovertarget="dropdown-menu-popover">
+        Open <svg></svg>
       </button>
       <div popover bt id="dropdown-menu-popover">
         <ul bt-dropdown-menu>
diff --git a/src/utils.ts b/src/utils.ts
index fea2a58..7130062 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -4,35 +4,44 @@ export function injectStyles(styles: string) {
   document.head.append(style);
 }
 
-const listeners: Record<string, (element: HTMLElement) => void> = {};
+const listeners: Record<string, (element: HTMLElement | SVGElement) => void> =
+  {};
 
 const observer = new MutationObserver((mutations) => {
-  const connected = new Set<HTMLElement>();
+  const connected = new Set<HTMLElement | SVGElement>();
   const selector = Object.keys(listeners).join(',');
 
   for (const { addedNodes, removedNodes } of mutations) {
     for (const node of addedNodes) {
-      if (!(node instanceof HTMLElement)) continue;
+      if (!(node instanceof HTMLElement) && !(node instanceof SVGElement))
+        continue;
 
       if (node.matches(selector)) {
         connected.add(node);
       }
 
-      for (const child of node.querySelectorAll(selector)) {
-        if (!(child instanceof HTMLElement)) continue;
+      for (const child of node.querySelectorAll(
+        getChildSelector(node, selector),
+      )) {
+        if (!(child instanceof HTMLElement) && !(child instanceof SVGElement))
+          continue;
 
         connected.add(child);
       }
     }
     for (const node of removedNodes) {
-      if (!(node instanceof HTMLElement)) continue;
+      if (!(node instanceof HTMLElement) && !(node instanceof SVGElement))
+        continue;
 
       if (node.matches(selector)) {
         connected.delete(node);
       }
 
-      for (const child of node.querySelectorAll(selector)) {
-        if (!(child instanceof HTMLElement)) continue;
+      for (const child of node.querySelectorAll(
+        getChildSelector(node, selector),
+      )) {
+        if (!(child instanceof HTMLElement) && !(child instanceof SVGElement))
+          continue;
 
         connected.delete(child);
       }
@@ -54,10 +63,28 @@ observer.observe(document, {
 
 export function onElementConnected(
   selector: string,
-  callback: (element: HTMLElement) => void,
+  callback: (element: HTMLElement | SVGElement) => void,
 ) {
   document
     .querySelectorAll(selector)
-    .forEach((element) => element instanceof HTMLElement && callback(element));
+    .forEach(
+      (element) =>
+        (element instanceof HTMLElement || element instanceof SVGElement) &&
+        callback(element),
+    );
   listeners[selector] = callback;
 }
+
+function getChildSelector(node: HTMLElement | SVGElement, selector: string) {
+  const selectorSegements = selector.split(/[ >]/);
+
+  if (selectorSegements.length === 1) {
+    return selector;
+  }
+
+  const childSelector = node.matches(selectorSegements[0])
+    ? selector.slice(selectorSegements[0].length).trim().replace(/^>/, '')
+    : selector;
+
+  return childSelector;
+}