com.mikepenz:devicon-typeface
Advanced tools
... allows to include any icon font with all its vector icons in your project. No limits. Scale with no limit, use any color at any time, provide a contour, and many additional customizations...
What's included 🚀 • Setup 🛠️ • Migration Guide 🧬 • WIKI / FAQ 📖 • Custom Font 🖍️ • Sample App
Already available fonts
dependencies {
//the core iconics library (without any widgets)
implementation "com.mikepenz:iconics-core:${latestAndroidIconicsRelease}"
implementation "androidx.appcompat:appcompat:${versions.appCompat}"
}
//this adds all ui view widgets (IconicsButton, IconicsImageView, ...)
implementation "com.mikepenz:iconics-views:${latestAndroidIconicsRelease}"
Note: Fonts ending with
-kotlinrequire at least v4.x of Android-Iconics Note: v5.1.x or newer requires the latest font versions
implementation 'com.mikepenz:google-material-typeface:3.0.1.5.original-kotlin@aar'
implementation 'com.mikepenz:community-material-typeface:5.3.45.2-kotlin@aar' // note 5.3.45.1 alphabetically sorts, and merges in 3 sections
implementation 'com.mikepenz:devicon-typeface:2.0.0.6-kotlin@aar'
implementation 'com.mikepenz:entypo-typeface:1.0.0.6-kotlin@aar'
implementation 'com.mikepenz:fontawesome-typeface:5.9.0.1-kotlin@aar'
implementation 'com.mikepenz:foundation-icons-typeface:3.0.0.6-kotlin@aar'
implementation 'com.mikepenz:ionicons-typeface:2.0.1.6-kotlin@aar'
implementation 'com.mikepenz:material-design-icons-dx-typeface:5.0.1.1-kotlin@aar'
implementation 'com.mikepenz:material-design-iconic-typeface:2.2.0.7-kotlin@aar'
implementation 'com.mikepenz:meteocons-typeface:1.1.0.6-kotlin@aar'
implementation 'com.mikepenz:octicons-typeface:3.2.0.7-kotlin@aar'
implementation 'com.mikepenz:pixeden-7-stroke-typeface:1.2.0.4-kotlin@aar'
implementation 'com.mikepenz:typeicons-typeface:2.0.7.6-kotlin@aar'
implementation 'com.mikepenz:weather-icons-typeface:2.0.10.6-kotlin@aar'
IconicsDrawable(this, FontAwesome.Icon.faw_android).apply {
colorInt = Color.RED
sizeDp = 24
}
If you use the Iconics library via XML provide the icon you want to use in the following syntax: gmd-favorite --> fontId-iconName. A list of the
available fonts and their fontId can be found here.
All icon names from the default fonts can be found via the DEMO application.
Use the { icon-definer } syntax
Some great text with a {faw-android} font awesome icon and {met-wind} meteocons icons.
Specify the drawable in your drawable folder.
<com.mikepenz.iconics.IconicsDrawable
xmlns:app="http://schemas.android.com/apk/res-auto"
app:ico_icon="gmd_favorite"
app:ico_color="#0000FF"
app:ico_contour_width="1dp"
app:ico_contour_color="#00FFFF"
app:ico_size="24dp" />
// all custom theming attributes supported
Use like any normal drawable in your application. This feature was suggested and initially provided by @dzamlo
<com.mikepenz.iconics.view.IconicsImageView
android:layout_width="72dp"
android:layout_height="72dp"
app:iiv_color="@android:color/holo_red_dark"
app:iiv_icon="gmd-favorite" /> // or @string/gmd_favorite with our generator
//app:iiv_size="12dp"
//app:iiv_padding="2dp"
//app:iiv_contour_color="#FF0000"
//app:iiv_contour_width="2dp"
//app:iiv_background_color="#FFFF00"
//app:iiv_corner_radius="2dp"
//app:iiv_background_contour_color="#FF0000"
//app:iiv_background_contour_width="1dp"
//app:iiv_shadow_radius="4dp"
//app:iiv_shadow_dx="1dp"
//app:iiv_shadow_dy="1dp"
//app:iiv_animations="spin|blink_alpha|blink_scale"
<com.mikepenz.iconics.view.IconicsTextView
android:text="abc{hif-test}defgh{faw-adjust}ijk{fon-test1}lmnopqrstuv{fon-test2}wxyz"
android:textColor="@android:color/black"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:textSize="16sp"/>
<com.mikepenz.iconics.view.IconicsButton
android:text="{faw-adjust} Button"
android:layout_width="120dp"
android:layout_height="60dp"/>
| Link | Prefix | Dependency |
|---|---|---|
| Google Material Design Icons ORIGINAL by Google | gmd | implementation 'com.mikepenz:google-material-typeface:+.original@aar' |
| Material Design Iconic Font Google Material Iconic | gmi | implementation 'com.mikepenz:material-design-iconic-typeface:+@aar' |
| Fontawesome | faw | implementation 'com.mikepenz:fontawesome-typeface:+@aar' |
| Meteocons | met | implementation 'com.mikepenz:meteocons-typeface:+@aar' |
| Octicons | oct | implementation 'com.mikepenz:octicons-typeface:+@aar' |
| Community Material | cmd | implementation 'com.mikepenz:community-material-typeface:+@aar' |
| Weather Icons | wic | implementation 'com.mikepenz:weather-icons-typeface:+@aar' |
| Typeicons | typ | implementation 'com.mikepenz:typeicons-typeface:+@aar' |
| Entypo | ent | implementation 'com.mikepenz:entypo-typeface:+@aar' |
| Devicon | dev | implementation 'com.mikepenz:devicon-typeface:+@aar' |
| Foundation Icons | fou | implementation 'com.mikepenz:foundation-icons-typeface:+@aar' |
| Ionicons | ion | implementation 'com.mikepenz:ionicons-typeface:+@aar' |
| Pixden7Stroke | pe7 | implementation 'com.mikepenz:pixeden-7-stroke-typeface:+@aar' |
| Material Design DX | cmf | implementation 'com.mikepenz:material-design-icons-dx-typeface:+@aar' |
Licenses for all included fonts are linked inside the class or can be found on the coresponding repositories.
If you want to add your own custom font, or a GenericFont you have to register this font (before using it). The best place to do this is the Application.
And initialize Iconics as you wish
class CustomApplication : Application() {
override fun onCreate() {
super.onCreate()
//register custom fonts like this (or also provide a font definition file)
Iconics.registerFont(CustomFont())
}
}
Everything is easy and simple. Right? But now you got a single icon within your textview and you need additional styling? Just define the style for all icons or only a specific one. You can find this in the PlaygroundActivity of the sample too.
Iconics.Builder()
.style(ForegroundColorSpan(Color.WHITE), BackgroundColorSpan(Color.BLACK), RelativeSizeSpan(2f))
.styleFor(FontAwesome.Icon.faw_adjust, BackgroundColorSpan(Color.RED))
.on(tv1)
.build()
Sometimes you won't like to use the icon-key ("faw-adjust") like this, but use the enum provided by a specific font. Both is valid:
IconicsDrawable(this, "faw-adjust").actionBar()
IconicsDrawable(this, FontAwesome.Icon.faw_adjust).apply {
sizeDp = 24
paddingDp = 1
}
This is possible with only the *.ttf and *.css mapping file. And will take you 2 minutes.
You can get these two files by downloading a web icon font, or if you want to create your own custom icon font from *.svg files then you can use following tools:
After you got those two files, head over to the icon addon creation tool android-iconics.mikepenz.com. Enter all the information. Add the *.ttf and *.css and click the button. It will generate and download the icon font addon as zip. (this tool is local only, no files are sent to a server, you can safely use it with any icons)
For generating string field for each of icons of your font, you can use this simple generator: Android-Iconics String Generator
A awesome gradle plugin which can automatically fetch a font from Fontastic, and generate the Android Module for your project. Iconics-Font-Generator
ProGuard / R8 rules are bundled internally with each font.
ContextWrapper inside CalligraphyMike Penz
Peter Gulko
Copyright 2020 Mike Penz
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
FAQs
Android-Iconics Library
We found that com.mikepenz:devicon-typeface demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.