Custom Icons

[iansoper]

Is there a good method to add custom icons? I know I could use Icon.less overrides, but I would like to use them with the Icon component. It looks like the icon references are from a static list in the SUI.js file. Is there a way to import a different list of icons from a different icon font?

[levithomason]

These two are actually equivalent:

<Icon name='user' />
<i class="user icon"></i>

The component renders down to the HTML, so at the end of the day elements in a Semantic-UI-React app are just plain HTML and CSS.

As you've noted, CSS would be the only way to change the icons. You would load your own font face and override the class names to use your new icons.

If you're asking, "How can I add new icon names to the list of validated icon names?" then the answer is, you cannot. The list is fixed from the supported list of core SUI icon names.

LMK if you have any further issues.

[nolandg]

See #955 on how to use custom icon names without warnings, namely like so:

<Icon className="my-custom-icon-name" />
<Button icon={{ className: 'my-custom-icon-name' }} />

In response to OP, you can use any icon font you want or easily build a custom icon font with Fontello and then either edit the icon names in that tool to match SUI or just use custom names via className prop as above. You just need some extra stuff in your css to specify the font name and icons, usually this is provided by the font you use or Fontello:

i.icon{
  font-family: fontello;
}
i.icon.custom-icon-name:before { content: '\e800'; } 

For extra performance, you can even embed the whole thing in your initial HTML response if you only use a handful of icons:

@font-face {
  font-family: 'fontello';
  src: url('data:application/octet-stream;base64,d0........RgABA') format('woff'),
}

[owlyowl]

Now with the latest version of semantic ui react and typescript having to type the icon name props as SemanticICONS feels wierd whereas previously passing a string with the icon name felt more flexible seeing as you can't directly call the enum SemanticICONS.

Is there a cleaner way to do this at present?

Thanks

[brianespinosa]

@owlyowl if you are using custom icons I would recommend NOT using the name prop unless your icons have exactly the same CSS names as they ship with in SUI core. I recommend that you use className instead. In the example below, both of these render the same markup.

// Both of these:
<Icon name='user' />
<Icon className='user' />

// Render this:
<i class="icon user"></i>

[owlyowl]

Awesome thanks Brian! Done!

…

On 15 Dec. 2017 5:50 am, "Brian Espinosa" ***@***.***> wrote: @owlyowl <https://github.com/owlyowl> if you are using custom icons I would recommend NOT using the name prop unless your icons have exactly the same CSS names as they ship with in SUI core. I recommend that you use className instead. In the example below, both of these render the same markup. // Both of these: <Icon name='user' /> <Icon className='user' /> // Render this: <i class="icon user"></i> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#931 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB0-CqJfztefgYI7Qb4yGpbBqlqgdEwbks5tAW33gaJpZM4K6r3U> .

[levithomason]

Future users see: FAQ - Can I use custom icons?