Custom Icons: size and color info missing in documtation

[Technofrikus]

Description

I have added custom icons and had/have some struggles.

Custom Icons as in: made by myself. Not other sets.

In the navigation they pushed away the text besides them:

I figured out that the svg need to be smaller. I couldnt find what size they need to be. I made them smaller and smaller until they worked.

Next (still unsolved) problem: what color should they have so that the color is adjusted depending on context? So for exmaple that they fit in when in a link.

Related links

I used this guide: https://squidfunk.github.io/mkdocs-material/setup/changing-the-logo-and-icons/#additional-icons

Proposed change

Add the specs that a custom icon needs to be in the documetation:

• size
• color, so that the theme customizes the color to fit the context.

Before submitting

• I have read and followed the documentation issue guidelines.
• I have attached the links to the affected sections of the documentation

[squidfunk]

I'm converting this to a discussion, so the community can help you with your customization. We're currently not considering making our icon customization guide more complex. However, if we can make it easier with a few sentences, feel free to open a PR.

[kamilkrzyskow]

Huh, weird I'm pretty sure I sent a comment in the Issue, but now I don't see it 🤔, perhaps I forgot to press send 😰

Let's take a random SVG from the theme and open it up in a text editor:

• https://github.com/squidfunk/mkdocs-material/blob/master/material/templates/.icons/material/ab-testing.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 2a2 2 0 0 0-2 2v8h2V8h2v4h2V4a2 2 0 0 0-2-2H4m0 2h2v2H4m18 9.5V14a2 2 0 0 0-2-2h-4v10h4a2 2 0 0 0 2-2v-1.5a1.54 1.54 0 0 0-1.5-1.5 1.54 1.54 0 0 0 1.5-1.5M20 20h-2v-2h2v2m0-4h-2v-2h2M5.79 21.61l-1.58-1.22 14-18 1.58 1.22Z"/></svg>

We can see the icon is set to a size of 24x24, all of the values in the path in the d attribute got compiled with that sizing in mind.
The SVG also doesn't have any color, so it uses the default black color, same as text would do, therefore can be influenced same as text.

[Technofrikus]

Thanks! I wanted to look at the original icons but could not find the path where they are.

Regarding the color, not sure how I can create an icon without any color? I disabled fill in inkscape but then it disappeared completely. Black did not work either. How can I get the icon to have the same color as the text/link? With the provided icons it works without me doing anything.

[kamilkrzyskow]

I'm not sure, I never used custom icons from Inkscape 🤔 Perhaps disabling the fill makes the shape transparent. Best to compare the HTML in text editor, maybe share it here as well?
You could also try using CSS https://squidfunk.github.io/mkdocs-material/customization/#additional-css and enforce color inheritance via !important flag. Though I don't know if that will help if the default option already inherits the color, just that the HTML inside the SVG enforces a color preventing the CSS to work at all 🤔

Opening this RAW link displays the SVG icon above in black:
https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/templates/.icons/material/ab-testing.svg

Try opening your invisible icon in a new tab of the browser and see if it's black or transparent.

[squidfunk]

Yes, @kamilkrzyskow is right. You just need to make sure that the svg file does not define a fill color, so it can be overridden with CSS. There should be no need for an !important modifier. It's a good idea to take a look at the SVG files that are distributed with Material for MkDocs, e.g.:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="..."></path>
</svg>

[Technofrikus]

Thanks for the advice. The svg with no infill in a browser is not visible. Just white as the background.

I compared the code of the svgs and inkscape adds a lot of stuff that seems to be not necessary.

Original from Inkscape:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="15.797458"
   height="15.586569"
   viewBox="0 0 15.797458 15.586569"
   version="1.1"
   xml:space="preserve"
   style="clip-rule:evenodd;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
   id="svg3"
   sodipodi:docname="stucco copy.svg"
   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"><defs
   id="defs3" /><sodipodi:namedview
   id="namedview3"
   pagecolor="#505050"
   bordercolor="#eeeeee"
   borderopacity="1"
   inkscape:showpageshadow="0"
   inkscape:pageopacity="0"
   inkscape:pagecheckerboard="0"
   inkscape:deskcolor="#d1d1d1"
   inkscape:zoom="23.796289"
   inkscape:cx="8.1735434"
   inkscape:cy="3.5719855"
   inkscape:window-width="1712"
   inkscape:window-height="1041"
   inkscape:window-x="0"
   inkscape:window-y="25"
   inkscape:window-maximized="0"
   inkscape:current-layer="svg3"><inkscape:page
     x="0"
     y="0"
     width="15.797458"
     height="15.586569"
     id="page3"
     margin="0"
     bleed="0" /></sodipodi:namedview>
    
<a
   id="a1" /><path
   class="cls-1"
   d="M 0.48031449,0.44230339 V 15.143461 H 2.9838023 c 0,-0.516549 0.032796,-1.024899 0.092923,-1.522317 C 3.8255863,7.5892692 8.9555498,2.9129946 15.181472,2.8801978 V 0.44230339 Z"
   id="path1"
   style="fill:none;stroke-width:0.273;fill-opacity:1;stroke:none;stroke-dasharray:none" /></svg>

I compared it to your icons and deleted nearly everything except the path and now it works! Thanks!!

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 15.797458 15.586569"><path
   d="M 0.48031449,0.44230339 V 15.143461 H 2.9838023 c 0,-0.516549 0.032796,-1.024899 0.092923,-1.522317 C 3.8255863,7.5892692 8.9555498,2.9129946 15.181472,2.8801978 V 0.44230339 Z"/></svg>

Just removing the style part at the end also does the trick :)

[squidfunk]

Nice! You can also try to use an SVG minifier like https://svgomg.net/ – there's a good chance it'll do the work for you ☺️