Text Select Move Forward Character icon

Text Select Move Forward Character icon variants

Every Material Symbols style, unfilled and filled, at weights 200, 400 and 700. Copy the <mat-icon> for a style, then set fill and weight with font-variation-settings.

<mat-icon>text_select_move_forward_character</mat-icon>

<mat-icon fontSet="material-symbols-rounded">text_select_move_forward_character</mat-icon>

<mat-icon fontSet="material-symbols-sharp">text_select_move_forward_character</mat-icon>

Examples in Angular Material

Common places to use text_select_move_forward_character, with the template code. Previews are drawn to match Angular Material's Material 3 components.

<button mat-icon-button aria-label="Text Select Move Forward Character">
  <mat-icon>text_select_move_forward_character</mat-icon>
</button>

<button mat-flat-button>
  <mat-icon>text_select_move_forward_character</mat-icon>
  Text Select Move Forward Character
</button>

<button mat-fab aria-label="Text Select Move Forward Character">
  <mat-icon>text_select_move_forward_character</mat-icon>
</button>

<mat-list>
  <mat-list-item>
    <mat-icon matListItemIcon>text_select_move_forward_character</mat-icon>
    <span matListItemTitle>Text Select Move Forward Character</span>
  </mat-list-item>
</mat-list>

<mat-toolbar>
  <span>My App</span>
  <span class="spacer"></span>
  <button mat-icon-button aria-label="Text Select Move Forward Character">
    <mat-icon>text_select_move_forward_character</mat-icon>
  </button>
</mat-toolbar>

<mat-form-field appearance="outline">
  <mat-label>Text Select Move Forward Character</mat-label>
  <mat-icon matPrefix>text_select_move_forward_character</mat-icon>
  <input matInput />
</mat-form-field>

How to customize the Text Select Move Forward Character icon in Angular Material

Use the controls at the top of this page to preview text_select_move_forward_character at any size and color, filled or outlined, and at any weight, grade or optical size, then copy the code. Here is what each setting does in your own Angular app.

<mat-icon class="text-select-move-forward-character-icon">text_select_move_forward_character</mat-icon>

.text-select-move-forward-character-icon {
  font-size: 40px;
  width: 40px;
  height: 40px;
  font-variation-settings: 'opsz' 40;
}

.text-select-move-forward-character-icon {
  color: #1a73e8;
  /* or follow your Material 3 theme */
  color: var(--mat-sys-primary);
}

.text-select-move-forward-character-icon {
  font-variation-settings: 'FILL' 1;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=text_select_move_forward_character&display=block" />

.text-select-move-forward-character-icon {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

Text Select Move Forward Character icon FAQ

How do I change the color of the Text Select Move Forward Character icon in Angular Material?

Give the <mat-icon> a class and set the CSS color property, for example .text-select-move-forward-character-icon { color: #1a73e8; }. The text_select_move_forward_character icon is a font glyph, so any text color works, including theme variables such as var(--mat-sys-primary).

How do I make the Text Select Move Forward Character icon bigger?

Set font-size, width and height together, for example font-size: 40px; width: 40px; height: 40px;. <mat-icon> has a fixed 24px box, so changing font-size alone makes the icon overflow.

How do I get the filled Text Select Move Forward Character icon?

Keep <mat-icon>text_select_move_forward_character</mat-icon> and set font-variation-settings: 'FILL' 1 in CSS. Material Symbols uses one name for both the outlined and filled Text Select Move Forward Character icon.

How do I make the Text Select Move Forward Character icon thinner or bolder?

Change the wght axis with font-variation-settings, from 'wght' 100 (thin) to 'wght' 700 (bold). Load the font with the full weight range, or the browser falls back to 400.

Can I download the Text Select Move Forward Character icon as an SVG?

Yes. Pick a style, fill and weight in the preview above, then open the SVG tab to copy or download text_select_move_forward_character.svg. Google publishes it under the Apache License 2.0, so it is free for commercial use.

About this icon

Name

text_select_move_forward_character

Icon set

Material Symbols only (new, not in legacy Material Icons)

Category

Text

Also found by

blinker, caret, character position, character select, cursor, dash, dashes, data entry, insert cursor, move forward, next character, right, right arrow, selection, text cursor, text editor, text indicator, text position, text selection, typing, typing indicator, word processing, write

Symbols codepoint

U+F738

Licence

Apache License 2.0, free for commercial use (Google Fonts)

Similar icons

• text_select_move_forward_wordtext_select_move_forward_word
• text_select_endtext_select_end
• text_select_move_back_charactertext_select_move_back_character
• text_select_jump_to_endtext_select_jump_to_end
• text_select_move_back_wordtext_select_move_back_word
• highlight_text_cursorhighlight_text_cursor
• text_select_jump_to_beginningtext_select_jump_to_beginning
• text_select_starttext_select_start
• text_select_move_downtext_select_move_down
• text_select_move_uptext_select_move_up
• text_fieldstext_fields
• selectselect