Semantic-UI Dropdown Icon Content

Last Updated : 10 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI dropdown allows a user to select a value from a series of options. Semantic-UI Dropdown offers us 11 types of dropdown and 3types of content Header, divider, and icon. In this article, we will learn about the Icon content.

Semantic-UI Dropdown Icon Content is used to create a dropdown that can hold an icon for a better interface.

Semantic-UI Dropdown Icon Content Class:

icon: This class is used to add the icon on the dropdown.

Syntax:

<div class="ui labeled icon dropdown button">
     <i class="...icon"></i>
</div>

The below example illustrates the Semantic-UI Dropdown Content Icon:

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <h1>Geeksforgeeks</h1> 
        <strong>Semantic-UI Dropdown Icon Content</strong> 
        <br><br> 
        <div class="ui floating labeled icon dropdown button"> 
            <i class="folder icon"></i> 
            <span class="text">Folder</span> 
            <div class="menu"> 
                <div class="header"> 
                    <i class="... icon"></i> 
                    ... 
                </div> 
                <div class="divider"></div> 
                <div class="item"> 
                    <i class="... icon"></i> 
                    ... 
                </div> 
                <div class="item"> 
                    <i class="... icon"></i> 
                    ... 
                </div> 
                <div class="item"> 
                    <i class="... icon"></i> 
                    ... 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html> 