Custom SVG as icon prop in sidebar nav

[lifeinchords]

Hi there,

I love Mintlify!

I'm trying to add the OpenAI logo as a nav bar item icon. I think Font Awesome are still working on adding it to the library, so wanted to add the SVG myself.

Are custom SVG icons in the nav supported?

I see a SVG icon via a card prop docs/integrations/analytics.mdx as described in the docs, but couldn't find any examples for inserting it into the nav via the mdx header like:

---
title: 'Open AI'
description: ''
icon: "<svg><path d='M11.9442 13.2715L4.12777 2.06738L1.26172 15.095L11.9442 13.2715Z'
    stroke='#888888'/></svg>"
---
# test SVG path, not the actual logo SVG ^

The wierd part is when I try this, I see some SVG in the DOM but it renders as a square like this:

I thought maybe the SVG I'm using is bad, so tried a very simple path instead. This is the rendered el:

<svg class="h-4 w-4 bg-primary dark:bg-primary-light" style="-webkit-mask-image:url(https://mintlify.b-cdn.net/v6.6.0/regular/{<svg><path d='M11.9442 13.2715L4.12777 2.06738L1.26172 15.095L11.9442 13.2715Z' stroke='#888888'/></svg>}.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-image:url(https://mintlify.b-cdn.net/v6.6.0/regular/{<svg><path d='M11.9442 13.2715L4.12777 2.06738L1.26172 15.095L11.9442 13.2715Z' stroke='#888888'/></svg>}.svg);mask-repeat:no-repeat;mask-position:center"></svg>

Lastly, I found global settings to change the font library, but I'm not sure how to use it https://mintlify.com/docs/settings/global#param-icons I'm using FA everywhere else in my docs, and would prefer not to switch to another font lib.

Am I missing anything?

[MQ37]

@lifeinchords Hey, when writing integration docs for Apify and wanting to include our own logo, which is not part of Font Awesome, I used this CSS trick. You can link any image you want unless it is blocked by CORS: in order to bypass CORS, I had to upload the image to Wikimedia. But if it's your site, you can easily skip this step and serve the image yourself.

See how to use a custom icon in the sidebar: https://github.com/MQ37/crewAI/blob/d614f0a4940947a89cf8ccf1f16d0e5ec8b33912/docs/tools/apifyactorstool.mdx?plain=1#L5

How it looks on the page: https://docs.crewai.com/tools/apifyactorstool

[lifeinchords]

hey @MQ37, Ah, I figured there must be a way, Thanks for the tip and the link to the source, this is perfect!

🙏

[uma-victor1]

@lifeinchords Hey, when writing integration docs for Apify and wanting to include our own logo, which is not part of Font Awesome, I used this CSS trick. You can link any image you want unless it is blocked by CORS: in order to bypass CORS, I had to upload the image to Wikimedia. But if it's your site, you can easily skip this step and serve the image yourself.

See how to use a custom icon in the sidebar: https://github.com/MQ37/crewAI/blob/d614f0a4940947a89cf8ccf1f16d0e5ec8b33912/docs/tools/apifyactorstool.mdx?plain=1#L5

How it looks on the page: https://docs.crewai.com/tools/apifyactorstool

Thanks for the tip. This saved me a lot of stress🙌🏾

[MQ37]

Update: For some reason Wikimedia capitalizes the first letter of the filename while minify converts the icon name the CSS string in this case to lowercase so the icon stopped working I had to use the GitHub repo to host the icon instead of Wikimedia.