CODEWITHSUNDEEP
htmlcsssvgstyled-componentsicomoon
Whichmann
Whichmann

Reputation: 197

Using icomoon icons inside ::before content property

I'm using Icomoon icons to render icons in my application. It works great so far when I invoke them directly in tsx. The problem I encountered now is that I want to set my icon as a ::before content.

In my icomoon directory, Icomoon generates @font-face declaration in the style.css, like so:

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?xxx');
  src:  url('fonts/icomoon.eot?xxx#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?xxx') format('truetype'),
    url('fonts/icomoon.woff?xxx') format('woff'),
    url('fonts/icomoon.svg?xxx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

and then I have classes declarations, like:

.icon-SomeIcon_ICO:before {
  content: "\e91f";
  color: #8898a9;
}

The icomoon also generates the svg file with glyphs that look like this:

<glyph unicode="&#xe91f;" glyph-name="SomeIcon" d="some path" />

Now, in my styled component, I'm trying to set that SomeIcon_ICO, as a content of the 3rd party library class, that I cannot alter directly:

.ag-class-wrapper::before {
    content: '\e91f';
    color: #8898a9;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
  }

but the result is an actual \e91f being displayed on the page. Since most of the icomoon stuff is autogenerated, I don't have much control over it and there's not really any url to my custom icon that I could pass to the content property. For the record, I'm using styled-components as an additional layer but I don't think it may be helpful to get around my problem.

Is there a way to somehow use the icomoon icon as content?

Upvotes: 0

Views: 378

Answers (0)

Related Questions