Open In App

Bulma Material Design Icons

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

The Bulma framework provides various types of Material Design icons such as Fontawesome, ionicons, etc to use in developing web applications, that are compatible with all icon font libraries. Below we will see how to use Material design icons in Bulma with sizes and examples. We can create the container of different sizes in Material Design Icons and can also modify the icon’s colors with some specific classes that are discussed below.

Bulma Material Design Icons Class:

  • mdi: For using material design icons in Bulma, we use mdi class in a span element.

Bulma List of Material Design Icon Container Classes:

  • icon: This class is used to create a container of size 1.5rem x 1.5rem.
  • icon is-small: This class is used to create a container of size 1rem x 1rem.
  • icon is-medium: This class is used to create a container of size 2rem x 2rem.
  • icon is-large: This class is used to create a container of size 3rem x 3rem.

Bulma List of Material Design Icon Classes:

  • mdi-light: This class is used to add an icon with light color.
  • mdi-dark: This class is used to add an icon with dark color.
  • mdi-light mdi-inactive: This class is used to add an icon with light inactive color.
  • mdi-dark mdi-inactive: This class is used to add an icon with dark inactive color.
  • mdi-flip-h: This class is used to flip an icon horizontally.
  • mdi-flip-v: This class is used to flip an icon vertically.
  • mdi-rotate-45: This class is used to rotate an icon at 450.
  • mdi-rotate-90: This class is used to rotate an icon at 900.
  • mdi-rotate-180: This class is used to rotate an icon at 1800.

Syntax:

<span class="icon Material-Design-Icon-Container-Classes">
    <span class="Material-Design-Icons-class 
                 Material-Design-Icon-Classes"></span>
    ....
</span>

Example 1: The below example illustrates Bulma Material Design Icons, container classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bulma Material Design Icons</title>
    <link rel="stylesheet"
          href=
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="content container has-text-centered">
        <h1 class="title has-text-success">
            GeeksforGeeks
        </h1>
        <h4 class="subtitle">
            Bulma Material Design icons
        </h4>
          
        <!-- icon is-small class -->
        <div class="container"
        <span class="icon is-small has-text-success">
            <span class="mdi mdi-book"></span> </span>
            <br>
              
            <!-- icon class -->
            <span class="icon has-text-dark">
                <span class="mdi mdi-bell-circle mdi-18px"></span
                <span class="mdi mdi-bell-circle mdi-24px"></span
            </span>
            <br>
              
            <!-- icon is-medium class -->
            <span class="icon is-medium has-text-info">
                <span class="mdi mdi-home"></span>
                <span class="mdi mdi-home mdi-18px"></span
                <span class="mdi mdi-home mdi-24px"></span
                <span class="mdi mdi-home mdi-36px"></span
            </span>
            <br>
              
            <!-- icon is-large class -->
            <span class="icon is-large has-text-danger">
                <span class="mdi mdi-account"></span
                <span class="mdi mdi-account mdi-18px"></span
                <span class="mdi mdi-account mdi-24px"></span
                <span class="mdi mdi-account mdi-36px"></span
                <span class="mdi mdi-account mdi-48px"></span
            </span>
        </div>
    </div>
</body>
</html>


Output:

Bulma Material Design Icons

Bulma Material Design Icons

Example 2: The below example illustrates the Bulma Material Design Icon classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bulma Material Design Icons</title>
    <link rel="stylesheet"
          href=
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="content container has-text-centered">
        <h1 class="title has-text-success">
            GeeksforGeeks
        </h1>
        <h4 class="subtitle">
            Bulma Material Design icons
        </h4>
        <div class="container">
              
            <!-- Light icon modifier class -->
            <span class="icon is-large has-background-success">
                <span class="mdi mdi-light mdi-bell"></span
            </span>
            <br />
              
            <!-- Dark icon modifier class -->
            <span class="icon is-large has-background-success mt-4">
                <span class="mdi mdi-dark mdi-bell"></span>
            </span>
            <br />
              
            <!-- Light inactive icon modifier class -->
            <span class="icon is-large has-background-success mt-4">
                <span class="mdi mdi-light mdi-inactive mdi-bell"></span
            </span>
            <br />
              
            <!-- Dark inactive icon modifier class -->
            <span class="icon is-large has-background-success mt-4">
                <span class="mdi mdi-dark mdi-inactive mdi-bell"></span>
            </span>
            <br />
              
            <!-- Flipped icons modifier class -->
            <span class="icon is-large has-background-success mt-4">
                <span class="mdi mdi-flip-v mdi-bell"></span
                <span class="mdi mdi-flip-h mdi-bell"></span
            </span>
            <br />
              
            <!-- Rotated icons modifier class -->
            <span class="icon is-large has-background-success mt-4">
                <span class="mdi mdi-rotate-45 mdi-bell"></span
                <span class="mdi mdi-rotate-90 mdi-bell"></span
                <span class="mdi mdi-rotate-180 mdi-bell"></span
            </span>
        </div>
    </div>
</body>
</html>


Output:

Bulma Material Design Icons

Bulma Material Design Icons

Reference: https://versions.bulma.io/0.7.5/documentation/elements/icon/#material-design-icons



Last Updated : 07 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads