Skip to content

Add a custom icon to a link in the page content #600

@patricklafrance

Description

@patricklafrance

I would like to add a custom icon to a link in my page content. Is it possible?

It's possible for the navigation menu with the following page metadata:

---
icon: ./static/browserslist.svg
---

Also seems possible for a file link:

[!file icon="../static/retype-icon.svg"](/static/sample.txt)

Or a reference link:

[!ref icon="../static/retype-icon.svg"](/guides/getting-started.md)

But I can't find how to do it with a regular link in my page content.

I tried a few silly things:

[icon="./static/browserslist.svg" text="Browserslist"](https://browsersl.ist/)
[Browserslist](https://browsersl.ist/) { icon="./static/browserslist.svg" }
:./static/browserslist.svg: [Browserslist](https://browsersl.ist/)

But none is working.

Almost got it with an image component, but I am not sure how to set the required CSS class to center the icon and set the width and height:

![](./static/browserslist.svg) [Browserslist](https://browsersl.ist/)

Thank you!

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions