Refactored icon options for mkdocs.yml

material/assets/manifest.json

@@ -1,8 +1,8 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.4333d4e1.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.f865046f.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.4333d4e1.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.f865046f.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
-  "assets/stylesheets/main.scss": "assets/stylesheets/main.d780ead5.min.css",
+  "assets/stylesheets/main.scss": "assets/stylesheets/main.f8a03d30.min.css",
   "assets/stylesheets/palette.scss": "assets/stylesheets/palette.f5f04e6f.min.css"
 }

material/base.html

@@ -43,7 +43,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.d780ead5.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.f8a03d30.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f5f04e6f.min.css' | url }}">
       {% endif %}
@@ -195,7 +195,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.4333d4e1.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.f865046f.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

material/mkdocs_theme.yml

@@ -56,14 +56,19 @@ font:
   # Fixed-width font for code listings
   code: Roboto Mono
 
+# From Material 5.x on, icons are inlined into the HTML and CSS as SVGs. Some
+# icons that are part of the HTML can be configured and replaced
+icon:
+
+  # Shown if no logo is set
+  logo: .icons/material/book-open-variant
+
+  # Repository icon
+  repo: .icons/fontawesome/git-alt
+
 # Favicon to be rendered
 favicon: assets/images/favicon.png
 
-# The logo of the documentation shown in the header and navigation can either
-# be a Material Icon ligature (see https://material.io/icons/) or an image URL
-logo:
-  icon: "\uE80C"
-
 # Material includes the search in the header as a partial, not as a separate
 # template, so it's correct that search.html is missing
 include_search_page: false

material/partials/footer.html

@@ -8,7 +8,7 @@
       <nav class="md-footer-nav__inner md-grid">
         {% if page.previous_page %}
           <a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
-            <div class="md-icon md-icon__button">
+            <div class="md-footer-nav__button md-icon">
               {% include ".icons/material/arrow-left.svg" %}
             </div>
             <div class="md-footer-nav__title">
@@ -31,7 +31,7 @@
                 {{ page.next_page.title }}
               </div>
             </div>
-            <div class="md-icon md-icon__button">
+            <div class="md-footer-nav__button md-icon">
               {% include ".icons/material/arrow-right.svg" %}
             </div>
           </a>

material/partials/header.html

@@ -4,14 +4,14 @@
 <header class="md-header" data-md-component="header">
   <nav class="md-header-nav md-grid">
     <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
-      {% if config.theme.logo.icon %}
+      {% if config.theme.logo %}
-        {% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
-      {% else %}
         <img src="{{ config.theme.logo | url }}" alt="logo">
+      {% else %}
+        {% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %}
       {% endif %}
     </a>
-    <label class="md-header-nav__button md-icon md-icon__button" for="__drawer">
+    <label class="md-header-nav__button md-icon" for="__drawer">
-      {% include ".icons/material/menu.svg" %}
+      {% include ".icons/material/menu" ~ ".svg" %}
     </label>
     <div class="md-header-nav__title" data-md-component="header-title">
       <div class="md-header-nav__ellipsis md-ellipsis">
@@ -32,7 +32,7 @@
       </div>
     </div>
     {% if "search" in config["plugins"] %}
-      <label class="md-header-nav__button md-icon md-icon__button" for="__search">
+      <label class="md-header-nav__button md-icon" for="__search">
         {% include ".icons/material/magnify.svg" %}
       </label>
       {% include "partials/search.html" %}

material/partials/source.html

@@ -4,10 +4,7 @@
 {% import "partials/language.html" as lang with context %}
 <a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-source">
   <div class="md-source__icon md-icon">
-    {% set repo_icon = config.extra.repo_icon | default(
+    {% include ".icons/" ~ config.theme.icon.repo ~ ".svg" %}
-      "fontawesome/brands/git-alt"
-    ) %}
-    {% include ".icons/" ~ repo_icon ~ ".svg" %}
   </div>
   <div class="md-source__repository">
     {{ config.repo_name }}

mkdocs.yml

@@ -56,6 +56,9 @@ theme:
   font:
     text: Roboto
     code: Roboto Mono
+  icon:
+    logo: material/book-open-variant
+    repo: fontawesome/brands/git-alt
   favicon: assets/favicon.png
   logo: assets/images/icon.svg
 
@@ -68,13 +71,13 @@ plugins:
 # Customization
 extra:
   social:
-    - icon: brands/github-alt
+    - icon: fontawesome/brands/github-alt
       link: https://github.com/squidfunk
-    - icon: brands/twitter
+    - icon: fontawesome/brands/twitter
       link: https://twitter.com/squidfunk
-    - icon: brands/linkedin
+    - icon: fontawesome/brands/linkedin
       link: https://www.linkedin.com/in/squidfunk/
-    - icon: brands/instagram
+    - icon: fontawesome/brands/instagram
       link: https://instagram.com/squidfunk
 
 # Extensions
@@ -96,6 +99,8 @@ markdown_extensions:
   - pymdownx.emoji:
       emoji_index: !!python/name:pymdownx.emoji.twemoji
       emoji_generator: !!python/name:pymdownx.emoji.to_svg
+  # - pymdownx.highlight:
+  #     linenums_style: pymdownx-inline
   - pymdownx.inlinehilite
   - pymdownx.keys
   - pymdownx.magiclink:

src/assets/stylesheets/base/_icons.scss

@@ -27,14 +27,6 @@
 // Icon
 .md-icon {
 
-  // Icon with button spacing
-  &__button {
-    display: inline-block;
-    margin: px2rem(4px);
-    padding: px2rem(8px);
-    cursor: pointer;
-  }
-
   // SVG defaults
   svg {
     display: block;

src/assets/stylesheets/layout/_footer.scss

@@ -116,6 +116,12 @@
     line-height: px2rem(48px);
   }
 
+  // Link button
+  &__button {
+    margin: px2rem(4px);
+    padding: px2rem(8px);
+  }
+
   // Link direction
   &__direction {
     position: absolute;

src/assets/stylesheets/layout/_header.scss

@@ -72,7 +72,10 @@
   // Icon buttons
   &__button {
     position: relative;
+    margin: px2rem(4px);
+    padding: px2rem(8px);
     transition: opacity 250ms;
+    cursor: pointer;
     z-index: 1;
 
     // Adjust for right-to-left languages

src/mkdocs_theme.yml

@@ -56,14 +56,19 @@ font:
   # Fixed-width font for code listings
   code: Roboto Mono
 
+# From Material 5.x on, icons are inlined into the HTML and CSS as SVGs. Some
+# icons that are part of the HTML can be configured and replaced
+icon:
+
+  # Shown if no logo is set
+  logo: .icons/material/book-open-variant
+
+  # Repository icon
+  repo: .icons/fontawesome/git-alt
+
 # Favicon to be rendered
 favicon: assets/images/favicon.png
 
-# The logo of the documentation shown in the header and navigation can either
-# be a Material Icon ligature (see https://material.io/icons/) or an image URL
-logo:
-  icon: "\uE80C"
-
 # Material includes the search in the header as a partial, not as a separate
 # template, so it's correct that search.html is missing
 include_search_page: false

src/partials/footer.html

@@ -38,7 +38,7 @@
             class="md-footer-nav__link md-footer-nav__link--prev"
             rel="prev"
           >
-            <div class="md-icon md-icon__button">
+            <div class="md-footer-nav__button md-icon">
               {% include ".icons/material/arrow-left.svg" %}
             </div>
             <div class="md-footer-nav__title">
@@ -68,7 +68,7 @@
                 {{ page.next_page.title }}
               </div>
             </div>
-            <div class="md-icon md-icon__button">
+            <div class="md-footer-nav__button md-icon">
               {% include ".icons/material/arrow-right.svg" %}
             </div>
           </a>

src/partials/header.html

@@ -33,17 +33,17 @@
       aria-label="{{ config.site_name }}"
       class="md-header-nav__button md-logo"
     >
-      {% if config.theme.logo.icon %}
+      {% if config.theme.logo %}
-        {% include ".icons/" ~ config.theme.logo.icon ~ ".svg" %}
-      {% else %}
         <img src="{{ config.theme.logo | url }}" alt="logo" />
+      {% else %}
+        {% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %}
       {% endif %}
     </a>
     <label
-      class="md-header-nav__button md-icon md-icon__button"
+      class="md-header-nav__button md-icon"
       for="__drawer"
     >
-      {% include ".icons/material/menu.svg" %}
+      {% include ".icons/material/menu" ~ ".svg" %}
     </label>
 
     <!-- Header title -->
@@ -69,7 +69,7 @@
     <!-- Button to open search dialogue -->
     {% if "search" in config["plugins"] %}
       <label
-        class="md-header-nav__button md-icon md-icon__button"
+        class="md-header-nav__button md-icon"
         for="__search"
       >
         {% include ".icons/material/magnify.svg" %}

src/partials/source.html

@@ -29,10 +29,7 @@
   class="md-source"
 >
   <div class="md-source__icon md-icon">
-    {% set repo_icon = config.extra.repo_icon | default(
+    {% include ".icons/" ~ config.theme.icon.repo ~ ".svg" %}
-      "fontawesome/brands/git-alt"
-    ) %}
-    {% include ".icons/" ~ repo_icon ~ ".svg" %}
   </div>
   <div class="md-source__repository">
     {{ config.repo_name }}