Material Design Drag Handle Icon

Material Design Drag Handle Icon refers to a small box on the side of the selected object that can be dragged to move the object. This Material Design Drag Handle icon code is "drag_handle". You can use this drag handle icon as Material UI, Vuetify, and Angular Material (Mat Icon).

Drag Handle Icon is given below. You can use this icon on the same way in your project. First make sure you have added Material Icon library. If this library is added just add the HTML css class drag_handle to any element to add the icon. Material Design Drag Handle Icon can be resized as per your need. You can manage size of icon(drag_handle) by using font-size css style.

You can get steps to add HTML icon Drag Handle in Web, Vuetify, Material UI, Material Design and Angular Material framwork.

How to add Material Design Drag Handle Icon ?

Material Icon drag_handle Icon can be added to any web page simply as below.

1. Web

You can integrate Icon in web pages by just adding following below syntax & icon code.

thumb_up

Icon -
<span class="material-icons">drag_handle</span>
Icon Code -
drag_handle


thumb_up

Drag Handle

drag_handle

Icon

<span class='material-icons-outlined'>drag_handle</span>

Code

drag_handle

Drag Handle

drag_handle

Icon

<span class='material-icons'>drag_handle</span>

Code

drag_handle

Drag Handle

drag_handle

Icon

<span class='material-icons-round'>drag_handle</span>

Code

drag_handle

Drag Handle

drag_handle

Icon

<span class='material-icons-sharp'>drag_handle</span>

Code

drag_handle

Drag Handle

drag_handle

Icon

<span class='material-icons-two-tone'>drag_handle</span>

Code

drag_handle

2. Vuetify Icon Drag Handle

You can add icon in vuetify(VueJS) material design framework just as below-

thumb_up

<v-icon>drag_handle</v-icon>

3. Material Ui Icon Drag Handle - React

You can add icon in MaterialUi react framework just as below-

thumb_up

import DragHandleIcon from '@mui/icons-material/DragHandle'

3. Angular Material Icon Drag Handle - mat-icon

You can add mat icon Angular Material in Angular Material framework by just adding below code-

thumb_up

<mat-icon>drag_handle</mat-icon>

Tags

app, application ui, components, design, drag, handle, interface, layout, menu, move, screen, site, ui, ux, web, website, window,Vuetify Drag Handle Icon (Vue Js), Material Ui Drag Handle Icon (React Js), Mat Icon Drag Handle (Angular Material)

drag_handle

drag_handle

drag_handle

drag_handle


Material Icon Drag Handle Icon | drag_handle | HTML, CSS

Adding Material Icon icon HTML Drag Handle(drag_handle) in web project is very simple. You need to add the icon class along with material-icons, it is basically main class and mandatory for icons so do not forget to add this class. You can customize Material Icon Drag Handle Icon Drag Handle as per your requirement, suppose that you need to chnage the color of Drag Handle icon or change the size of size. It is pretty simple to change color of icon Drag Handle just add style="color:red" it will make font color red. On the same way you can change size of Drag Handle icon by just adding style="font-size:50px;". Smililarly you can add border color, shadow and other font styles to Drag Handle. Hope this icon fullfilled your need. Thanks for visiting us.

Change Material Icon Icon Drag Handle Color

Sometimes we need icons in different color, as we suggested by adding css style we can change color. Here we have created one example to change color of icons with css classes.


    <style>
.blue-color {
color:blue;
}
.green-color {
color:green;
}
.teal-color {
color:teal;
}
.yellow-color {
color:yellow;
}
.red-color {
color:red;
}
</style>
<span class="material-icons blue-color"> drag_handle</span>
<span class="material-icons green-color">drag_handle </span>
<span class="material-icons teal-color"> drag_handle</span>
<span class="material-icons yellow-color">drag_handle </span>
<span class="material-icons red-color">drag_handle </span>

Output of the above example will be as below-

drag_handle drag_handle drag_handle drag_handle drag_handle
Note- Make Sure You have included the below Material Design file in header-

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    

Advertisements



Related Icons

drag_handle- Faq(s)?

⭐What is the Material Design Drag Handle Icon code?

Icon Code is - drag_handle.

⭐ What is Vuetify Drag Handle Icon code?

Vuetify Drag Handle Icon code is: drag_handle

⭐What is Material UI Drag Handle Icon (React) code?

import drag_handleIcon from '@mui/icons-material/drag_handle

⭐ What is Angular Material Drag Handle Icon code?

Drag Handle.

Advertisements



For More Icons?