How to implement .svg images as icons in admonition types?

[Tre20tyu]

Things I have tried

• Going to .main in the obsidian folder and trying to implement my own admonition amongst the others
• Creating my own .json file with icons similarly formatted to the rpg and octicon(other external icon packs) formats
• Putting the svg in the icons folder of the obsidian admonitions folder and trying to call them in the icon: section

After searching through reddit and on the forms, and even watching Zsolt’s video which helped me figure out how to solve this problem with callouts, I am still unable to figure out how to take personal .svg imgs and implement them as icons. I know I am very close but I can’t quite figure it out.

What I’m trying to do

I am trying to take C, C++, and C# and other logos, that I converted into .svg, and implement them as logos in my admonitions. Specifically, the admonition types, not the callouts. I have figured out how to do this with callouts from the video linked above.

If you couldn’t already tell, I am very new to programming and the documentation, to me (See “Images as Icons” in the documentation, at least, isn’t clear on how to accomplish this.

[holroy]

OK, so this might not be the cleanest solution, but I was able to change the icon to something else.

To achieve this I did the following:

• Created a custom admonition type of “Dumpty”, with a title of “Dumpty”
• Set the Admonition icon to be: “adjust”. This needs to be something you do not use for other icons in admonition, as we will override it later on

The next step is to add a CSS snippet, like vault/.obsidian/snippets/myAdmonitionIcons.css, and that file should look something like:

.admonition-title-icon svg.fa-adjust path {
  display: none;
}

.admonition-title-icon svg.fa-adjust {
  --our-adjust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0H24V24H0z'/%3E%3Cpath d='M21.158 4.258c.034 3.5.591 4.811.788 6.701.301 2.894-.657 5.894-2.875 8.112-3.666 3.666-9.471 3.89-13.4.673l2.852-2.853c2.344 1.67 5.617 1.454 7.72-.648 2.102-2.103 2.318-5.377.648-7.72l4.267-4.265zm-2.83-.002l-2.851 2.853c-2.344-1.67-5.617-1.454-7.72.648-2.102 2.103-2.318 5.376-.648 7.72l-4.267 4.265c-.034-3.5-.591-4.811-.788-6.701-.301-2.894.657-5.894 2.875-8.112 3.666-3.666 9.471-3.89 13.4-.673zM12 8c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zm0 2.5c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5z'/%3E%3C/svg%3E");   

 background-color: yellow;
 height: 24px !important;
 width: 24px !important;
 -webkit-mask: var(--our-adjust)
}

And then you go to Settings > Appearance (CSS snippets), find your CSS file, i.e. “myAdmonitionIcons”, and enable it. If you now make an ad-dumpty block, it should get the new icon.

Let’s go through what’s happening in this CSS file a little:

• First we hide the other icon, using the first line. Note that it hardcodes the actual icon we chose earlier on. So if you set something other than adjust you need to change the fa-adjust to match this new variant.
• Then we set what our new image should be using the --our-adjust: line. In my example I chose an icon from remixicon.com, and copied the SVG for the data URL, and removed the part with background-image: , so that it just leaves the url: .... part
• Set the color for your icon using background-color: ...
• Change the height and width accordingly to the size of your icon, and remember the !important to override the original sizes
• Finally use the chromium way to add the image, using -webkit-mask: var(--our-adjust). If you chose to use something else than adjust as your base icon, I suggest also changing the setting a few lines up, and here to match that setting. It just needs to be unique, but “re-using” the fa icon name, kind of ensures that

If you want to add another icon, then add the new custom admonition type, and afterwards copy all lines in the CSS, and change the adjust to whatever icon you want to replace with your new svg icon, and of course change the url(...) part to match your new icon.

[Tre20tyu]

@holroy,

Thanks for the swift solution! I have finally had time to mess around with this.

Your reponse pointed me to the fact that I could easily make types without even having to use css by just using the “Add new” option. I wish I had known this, however, I learned so much about the .svg file type and and css, I could go on so it proved to be very valuble.

Here is a picture of that below. As shown, I used your css-snippet idea, but also used the “Add type” option along with some .svgs that modified from existing images, and a FontAwersome icon for comparison

There are two issues with this solution.

• The first is that it comes at the cost of overwriting an existing icon as I discovered when using `icon: adjust’. It would be cool if there was some sort of way to hard code the icon
  into the main.js or, however it should be done, in order for it to be its own thing… I don’t
  yet know the termihology but I will sometime soon.

• The second, which I am still having trouble fixing has to do with the adjusting of the icons with zoom. For some reason, whether I zoom in or zoom out
  the icon remains at its width and height. This doesn’t occur with the FontAwesome or Ociton icons.

I think it may have something to to with this css and js

.admonition-title-icon svg.fa-adjust {
  transform: scale(var(--zoom-level));
}

document.body.style.setProperty('--zoom-level', window.devicePixelRatio);

But I am not sure how to implement them, and I’ve spent too much time working on this than actually learning to code :v. I’ll figure those problems out eventually.

Regardless, you not only answered my question but did so in an way that was super instructive and pointed me in the direction of solving other problems and asking more questions. Thank you, again, so much!!!

Also I found a website that converts .svg file types to Data URLs and was able to use that to convert .svg data from my own file types into data that could be implemented into the
url field:

  --our-adjust: url("");

[holroy]

@Tre20tyu

The first is that it comes at the cost of overwriting an existing icon as I discovered when using `icon: adjust’.

Come to think of it, there might not need to actually use an existing fa-icon. I’m not at home right now, but what happens if you insert something unique as an icon, like instead of adjust use t2t-cplusplus?

@Tre20tyu

The second, which I am still having trouble fixing has to do with the adjusting of the icons with zoom.

Yeah, I can see that as a problem. I don’t tend to use zoom a lot… it should be possible to add that zoom level thingy into the settings of the height and width. I’ll see if I can get around to playing around with that later today.

[holroy]

@Tre20tyu

transform: scale(var(--zoom-level));

Did you try adding just that line into the section where we set the new icon?

[Tre20tyu]

@holroy,

I’m happy to see both of your responses! We shall continue down the css rabbit hole.

@holroy

Come to think of it, there might not need to actually use an existing fa-icon. I’m not at home right now, but what happens if you insert something unique as an icon, like instead of adjust use t2t-cplusplus?

I tried changing fa-adjust to typescript to go along with the typescript logo I tried to implement. By default, the “Dumpty” type has a Cpp logo. Below are the css as well as the admonition blocks I used and their code. I also created a typescript type for reference of what the typescript icon should look like.

```ad-typescript
```
```ad-dumpty
icon: adjust
title: Dumpty
```

```ad-dumpty
icon: typescript
title: Dumpty
```

.admonition-title-icon svg.typescript path {
  display: none;
}

.admonition-title-icon svg.typescript {
  --our-typescript: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 48 48'%3E%3Cpath d='M6 6v36h36V6Zm20.9 19h-4.69v13.76h-3V25h-4.64v-2.54H26.9Zm5.39 14a9.42 9.42 0 0 1-4.41-1l.66-2.46a8.29 8.29 0 0 0 3.94 1c1.9 0 3-.89 3-2.22s-.82-2-2.89-2.71c-2.69-.95-4.41-2.39-4.41-4.73 0-2.67 2.23-4.68 5.77-4.68a8.66 8.66 0 0 1 3.91.81l-.71 2.4a7 7 0 0 0-3.26-.78c-1.89 0-2.69 1-2.69 2 0 1.25.94 1.84 3.11 2.67 2.84 1.08 4.2 2.5 4.2 4.84-.04 2.6-2.02 4.86-6.22 4.86Z'/%3E%3C/svg%3E");   

 background-color: black;
 height: 24px !important;
 width: 24px !important;
 -webkit-mask: var(--our-typescript)
}

Result

As shown, the ‘adjust’ goes back to the “fa-adjust” icon, however, the icon: typescript does not change the cpp logo to the typescript one. So I think there must be an icon avalible originally that needs to be overwritten. It otherwise, does not work.

[Tre20tyu]

@Tre20tyu

transform: scale(var(–zoom-level));

After tinkering around with this, I got it to work!

Here is the css I used.

.admonition-title-icon svg.fa-adjust path {
  display: none;
}

.admonition-title-icon svg.fa-adjust {
  --our-adjust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 48 48'%3E%3Cpath d='M6 6v36h36V6Zm20.9 19h-4.69v13.76h-3V25h-4.64v-2.54H26.9Zm5.39 14a9.42 9.42 0 0 1-4.41-1l.66-2.46a8.29 8.29 0 0 0 3.94 1c1.9 0 3-.89 3-2.22s-.82-2-2.89-2.71c-2.69-.95-4.41-2.39-4.41-4.73 0-2.67 2.23-4.68 5.77-4.68a8.66 8.66 0 0 1 3.91.81l-.71 2.4a7 7 0 0 0-3.26-.78c-1.89 0-2.69 1-2.69 2 0 1.25.94 1.84 3.11 2.67 2.84 1.08 4.2 2.5 4.2 4.84-.04 2.6-2.02 4.86-6.22 4.86Z'/%3E%3C/svg%3E");   

  background-color: rgb(255, 0, 200);
  transform: scale(var(--our-adjust));
  -webkit-mask: var(--our-adjust)
}

As shown, I removed

  height: 24px !important;
  width: 24px !important;

, implemented transform: scale and used --our-adjust as an argument.

Here is that dumpty block from last time using icon: adjust to override the fa-adjust icon nested between two custom admonition blocks in order to reveal the typescript.svg I imported from here. You can really see the difference.

[holroy]

@Tre20tyu

transform: scale(var(--our-adjust));

How does this know what to scale to though?! I’m happy it works, but I’m not quite sure why this should work when scaling the view.

@Tre20tyu

As shown, the ‘adjust’ goes back to the “fa-adjust” icon, however, the icon: typescript does not change the cpp logo to the typescript one. So I think there must be an icon avalible originally that needs to be overwritten. It otherwise, does not work.

My code wasn’t meant to actually define an icon, as such, but more to be used in combination with creating custom admonition types. So I’m not surprised that icon: typescript doesn’t function.

But in the first line with the ad-typescript, is that a custom admonition type where the icon is set to typescript? If so, then it show cases the “better” solution of not re-using an existing fa-icon, but just find some unique icon-value, to be used in the CSS files, aka typescript (or t2t-typescript which would be short for “Tre20tyu-typescript”).

PS! The reason I used --our-adjust was to avoid messing with the --fa-adjust, so if using something like t2t-typescript, you could change --our-adjust into --t2t-typescript, as that would likely not be used for anything else. That’s also why I would suggest using that, instead of typescript in general, to avoid unintentional changes elsewhere.

[Tre20tyu]

@holroy,

@holroy

How does this know what to scale to though?! I’m happy it works, but I’m not quite sure why this should work when scaling the view.

Personally I don’t know either and was just as suprised as you . I skimmed through the documentation but I will probably give it another, more thorough, read.

@holroy

My code wasn’t meant to actually define an icon, as such, but more to be used in combination with creating custom admonition types. So I’m not surprised that icon: typescript doesn’t function.

After re-reading your original response realize that more now .

@holroy

But in the first line with the ad-typescript, is that a custom admonition type where the icon is set to typescript?

That’s exactly what it is! I created a custom type without using CSS and only using the “Add new” feature in admonition

I then set the icon to be a file called typescript-ts.svg by clicking on the .img icon

With this approach, there is still the zoom issue as icons don’t resize themselves with zoom as shown below (Fixing this would actually be a nice revision to the plugin).

Apart from this, the CSS-snippet approach “dumpty-adjust” approach, if you will, came with the added advantage of allowing the icons to be used across different admonition types.

@holroy

If so, then it show cases the “better” solution of not re-using an existing fa-icon, but just find some unique icon-value, to be used in the CSS files, aka typescript (or t2t-typescript which would be short for “Tre20tyu-typescript”).

What do you mean when you say “CSS files,” here? Are you referring to the snippet, or suggesting the creation of a new snippet? Or do you mean the CSS of the custom admonitions?

[holroy]

@Tre20tyu

What do you mean when you say “CSS files,” here? Are you referring to the snippet, or suggesting the creation of a new snippet? Or do you mean the CSS of the custom admonitions?

I meant the “dumpty-adjust” approach CSS file. If you set a variable within CSS, like --typescript: ... it could potentially mess if someone/something else also sets that variable. Therefore it would be better to make sure you’re using an unique variable name.

But then again, if it works for you, it works for you!

[Tre20tyu]

Ahh, I see what you’re saying.

Yes, so far everything works as well as it needs to for now and I can return to CS50. I’ll return to your code at some point and try to perfect it for icons outside of font awesome, or probably just find fa icons I know I’ll never use… although my OCD will probably not allow for that . The thought of losing potential icons…

Thanks so much again

PS: I see you’re super active on this forum so happy troubleshooting!!!