Icon inside gutter


Hello, dear programmers

I am new to atom.

I installed one package (I don’ think it’s very important right now since I tried some of them). And wanted to “tweak” it a bit. That package added one more gutter to the editor to show the committer of the line. I wanted to add icon to every line produced by package (<span class="icon icon-clippy"></span>) but to my surprise it didn’t show at all. When inspecting this element the devtools showed me that no .icon or .icon-clippy classes were applied to the span element.

What am I doing wrong?


Are you using the Decorations API? I’m not sure how that will work with the second gutter … but this is generally how one decorates a line or other chunk of code.


yes that API mentioned by you is used there as well, but nothing helps. I even tried to set the class manually in devTools console, but no luck


Where are you checking for the span to exist? If you’re looking for it on the text lines themselves, it won’t be there because decorations are placed on a separate layer.


Ok, frankly speaking, I don’t know how answer your question, but I will explain what I did.

I cloned atom repo. Compiled all the .less files into one .css. I found that .icon is global class it doesn’t inherit from anything.

Then I opened devtools and tried to add .icon class to different elements (in gutter, in editor, in search form etc.) but… nothing happend. I didn’t see any icon :cry: It might be because of my poor knowledge in css.


Yeah, it doesn’t really work like that. Different Less files can be loaded in different contexts. You may also be running into a Shadow DOM issue. See the FAQ here:


Hm… Thanks for your help. Will see, what I can do with this info


Atom provides LESS mixins for the octicons. Combined with the link @leedohm provided, the following code should give you icons in the text editor:

@import "octicon-mixins";

atom-text-editor::shadow {
  .my-awesome-octicon {

Then you can add the my-awesome-octicon class to any element in the text editor to get your awesome icon :smile:

If you’re planning on doing a package it’s easier (and the recommended way of doing this): you use .atom-text-editor.less instead of just .less for the file extension and the file will be loaded into each text editor’s shadow DOM. Then you should also drop the outer atom-text-editor::shadow block from the snippet above.


Perfect, thanks. That what I was looking for