How to add animations to page icons?

[HotCakeX]

This page explains how to add icons to page that are rendered in navigation sidebar. Here explains how to add animations to the icons.

But how to use them both?

Page icons need to be set like this

---
icon: material/emoticon-happy 
---

and doing this doens't work

---
icon: material/emoticon-happy:{ .heart }
---

[alexvoss]

I assume you included the extra CSS? Have you got the attr_list markdown extension installed so the class gets attached to the icon?

[HotCakeX]

Yes I have attr_list but the syntax I showed is incorrect that's why it's not working.

[kamilkrzyskow]

The attr_list markdown extension can only be used in the Markdown content iirc, so you can't use the { .heart } syntax in the file header / front-matter.
Having said that, I'm not sure how one would target that 1 specific icon in the whole navigation list, as there is no unique identifier added to it 🤔

[HotCakeX]

I'll try the method @alexvoss suggested, thanks

Btw, is it possible to add icons to the main navigation? The one that's on top. This is my website that I'm working on. I've added heart icons to the sidebar navigation but from the comments it looks like I can add the same icons to the top menu as well?

[HotCakeX]

This applies the animation to all of the sidebar navigation icons

@keyframes heart {

    0%,
    40%,
    80%,
    100% {
        transform: scale(1);
    }

    20%,
    60% {
        transform: scale(1.15);
    }
}

.md-nav--primary .md-nav svg {
    position: relative;
    animation: heart 1000ms infinite;
}

[alexvoss]

The thing you would need to add to be specific would be an attribute selector, matching the URL in the href attribute. That should work.

[kamilkrzyskow]

Tested on https://squidfunk.github.io/mkdocs-material/plugins/ :

.md-nav--primary .md-nav__link[href="social/"] svg {
  animation: heart 1000ms infinite;
}

And only the nav item to the social page icon has the animation.

[kamilkrzyskow]

As for this @HotCakeX,

I'll try the method @alexvoss suggested, thanks

Btw, is it possible to add icons to the main navigation? The one that's on top. This is my website that I'm working on. I've added heart icons to the sidebar navigation but from the comments it looks like I can add the same icons to the top menu as well?

Please read this discussion: #6419
Your tabs at the top are only sections, they don't have index.md pages attached to them, therefore you can't add icons without modifying the overrides.

On https://squidfunk.github.io/mkdocs-material/plugins/ you can see that the Plugins on the left navigation is clickable, this means there is a site attached to it, however the Material docs don't use icons this way. On your page every tab is just a section without a page.

[HotCakeX]

Tested on https://squidfunk.github.io/mkdocs-material/plugins/ :

.md-nav--primary .md-nav__link[href="social/"] svg {
  animation: heart 1000ms infinite;
}

And only the nav item to the social page icon has the animation.

I can't get it to work on my website. My nav links have spaces and aren't as simple. https://spynetgirl.github.io/

putting %20 for the spaces isn't doing it. Many pages have different title and link from the name on the left side nav.

[kamilkrzyskow]

I'm not sure what you mean, using Firefox or Chromium I got it working for the exact match:
https://spynetgirl.github.io/Miscellaneous/About%20TLS%2C%20DNS%2C%20Encryption%20and%20OPSEC%20concepts/

.md-nav--primary .md-nav__link[href="../Event%20Viewer/"] svg {
  animation: heart 1000ms infinite;
}

and as per the linked documentation it doesn't have to be a exact match:

.md-nav--primary .md-nav__link[href*="Event"] svg {
  animation: heart 1000ms infinite;
}

and as per the linked documentation case-insensitive ending:

.md-nav--primary .md-nav__link[href$="event%20viewer/" i] svg {
  animation: heart 1000ms infinite;
}

IMHO your file and folder names are problematic, as they are case sensitive, contain special characters like commas or spaces, hence the requirement for unicode character escapes.

putting %20 for the spaces isn't doing it. Many pages have different title and link from the name on the left side nav.

You don't have to guess how to write the character escapes, just look at the rendered href value in the HTML source code of the page. That's the string that is being used for the match lookup.

[HotCakeX]

Thanks, using 2 dots fixed it, so they must be relative to the root

[href="../Event%20Viewer/"]

I don't know how your previous example worked though

[href="social/"]

Seems like it should've been this instead

[href="../social/"]

Since the page is located at https://squidfunk.github.io/mkdocs-material/plugins/social/

[kamilkrzyskow]

As I said before:

The href in the nav use relative links from the current page to the target page
You don't have to guess how to write the character escapes, just look at the rendered href value in the HTML source code of the page. That's the string that is being used for the match lookup.

I meant you don't have to guess anything, just look at the source code. As for the confusion:
The https://squidfunk.github.io/mkdocs-material/plugins/ URL ends with a /, because the use_directory_urls setting is enabled by default.
So in the rendered index Plugins page we're, in a way, inside of the plugins/ root directory. Therefore the relative link is simply social/, because it's a continuation of the path, as social is inside the plugins directory.

On your page I was in the Miscellaneous/About TLS%2C DNS%2C Encryption and OPSEC concepts/ path.
So to get to the Miscellaneous/Event Viewer/ path I first have to use .. to go back 1 directory level into Miscellaneous/ and then access Event Viewer.

Please note that file paths in your Markdown files and rendered URL paths work a bit differently, because of the use_directory_urls setting:
mkdocs/mkdocs#3312

[HotCakeX]

The thing you would need to add to be specific would be an attribute selector, matching the URL in the href attribute. That should work.

From the article you mentioned, it looks like the links should point to the actual URL to work and won't work when I'm previewing my website with serve ?

[kamilkrzyskow]

The example shows href with an actual full URL, but it's just a string in the source code of the page. The href in the nav use relative links from the current page to the target page, it's completely fine and should behave the same with serve and on GitHub Pages.