Icon in data-navmenu

[ambarja]

Hello everyone, Is possible add a new icon in data-navmenu? Personally, I put the next code 👇

Exposición {data-navmenu='<img src="data/covid.png" width="18px">Riesgo por COVID-19' data-icon='fa-list'}

but it return error, however when I create a new page section and I put this html code <img src=""> TITLE , si display it the image.
Here I added some images

[vkatti]

I think we do it as below:

---
title: "MyDashboardTitle"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    logo: "path/to/logo.png"
    theme: cosmo
    navbar:
      - {title: "Last Updated at 19-04-2022", align:right}
---
```{r setup, include=FALSE}
library(flexdashboard)
```

# Home {data-icon="fa-home"}

This is Home

# Stats {data-icon="fa-chart-pie"}

This is Stats

[whv20]

I think @ambarja is referring to adding an icon to headings on the navigation bar that when clicked bring up a drop down menu.

When you want a page to appear directly on the navigation bar, @vkatti 's solution works perfectly :)

# Section 1 {data-icon="fa-home"}

Some content

# Stats {data-icon="fa-chart-pie"}

Some more stuff

But if you want to nest several pages in a sub-menu (using data-navmenu="Submenu name"), it doesn't seem to be possible to give the submenu's title an image:

# Section 1  {data-icon="fa-home"}

Section 1 is accessed via a button which appears directly on the navigation bar

# Section 2 {data-icon="fa-chart-pie" data-navmenu="Topics"}

Section 2 is accessed via a submenu entitled 'Topics'

# Section 3 {data-icon="fa-info" data-navmenu="Topics"}

Section 3 is also accessed via a submenu entitled 'Topics'

Together with @ambarja , I would very much like to be able to add an icon to these drop down menu headings (in the example above, I would want 'Topics' to have an icon next to it). Does anyone know if this is possible? If not, please could you consider it for a future update of flexdashboard? Thank you :)

[vkatti]

Following is a workaround. Adding the Emoji directly seems to work. But I agree, a better alternative is needed.

# Section 2 {data-icon="fa-chart-pie" data-navmenu="📩 Topics"}

[whv20]

Thanks @vkatti , this is a very helpful workaround :) Do you know if it's possible to make the emojis blue and white, like icons would be?

[vkatti]

FontAwesome icons conforms to the font color and size as needed. Check out this Stackoverflow link about the same.
https://stackoverflow.com/questions/17254339/font-awesome-unicode