· react semantic-ui

React Semantic-UI: Adding a custom icon to open link in a new window

I’ve been building a little React app that uses the Semantic UI library and found myself wanting to render a custom icon.

Semantic UI describes an icon as "a glyph used to represent something else", and there are a big list of in built icons. For example, the following code renders a thumbs up icon:

import {Icon} from "semantic-ui-react";

<Icon name="thumbs up outline icon green large" style={{margin: 0}}/>
thumbs up
Figure 1. Thumbs Up Icon

I wanted to add an icon to indicate that a link would open in a new window, and came across this GitHub issue that explains how to add a custom icon. Instead of using the name property, we can use the className property to have a icon render based on our own CSS.

Ruard van Elburg explained how to render an open in new window icon in this StackOverflow answer.

We’ll first add the following CSS:

i.icon.open-new-window:after {
  content: "\f35d";
}

And then can use the open-new-window class to render our icon:

<a href="https://www.neo4j.com" target="_blank">
  <Icon className="open-new-window black"/>
</a>
open window
Figure 2. Open Window Icon

And we’re done!

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket